Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Tailwind CSS Time Tracking Dashboard

tailwind-css
Rebeka•170
@BekiaD
A solution to the Time tracking dashboard challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

The layout and the animations. Little details like hover states.

What challenges did you encounter, and how did you overcome them?

The refactoring of the JS into for loops was a bit mind boggling. I find it difficult to think through the process so I use mindmaps for this. Deploying the tailwind project to netlify also took quite some time to figure out

What specific areas of your project would you like help with?

Any feedback is welcome.

  • on mobile view the top part of the card is cut off because of the h-screen, but if i change it to sm:h-screen it looks fine on mobile, but not aligned on desktop view
  • There is a part commented out in my code that would pop up a share button when hovered over the ellipses (...) at each card. I found here difficult to work with the cards individually with a lot of repetition.
  • Also the bigger issue is that after the mouseover event the popup stays there.
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Rebeka's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License