Skip to content
Submitted 11 months ago

Time Tracking Dashboard

accessibility, react, tailwind-css, vite, typescript
Mateusz•260
@MateuszZalew
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

First project using tailwind, had to check the docs many times, but I like it.

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

Main challenge was the top colorful border in the cards, had 2 ideas how to do it:

  • with ::before pseudo-element
  • by putting a colorful div behind the card with dark background

Decided to go with the 2nd one, because I didn't know if placing a bg img inside a pseudo-element would even work. My first solution isn't ideal, cause I had to change the height of the div in the background.

Other challenge was changing color of the three dots to white on hover, unfortunately didn't manage to do it, tried changing fill property of the svg but didn't work unfortunately.

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

Tips regarding the problems I described higher or any other suggestions will be much appreciated, thank you for your time 🙂!

Code

Please log in to post a comment

Log in

Community feedback

  • Teodor Jenkler•4,040
    @TedJenkler

    Hi @MateuszZalew,

    Nice project! If I understand you correctly, you’re discussing using overlays with the ::before pseudo-element, which can be challenging in Tailwind. Here are two ways to achieve overlays using tailwind:

    1. Two Elements with z-index: You can use a parent element with relative positioning and an overlay with absolute positioning. Set the overlay’s z-index higher and use utility classes like top-[0], left-0, right-0, and bottom-0 to cover the area. Add an onClick event if the overlay needs to be interactive.
    <div class="relative"> <img src="image.jpg" alt="Background Image" class="w-full h-auto"> <div class="absolute inset-0 bg-black bg-opacity-50 z-10"></div> </div>

    This is a full-cover overlay with 50% opacity ur case need just a different position.

    1. Using ::before Element: Tailwind doesn’t natively support ::before sadly like they do hover:[value] , but you can achieve similar effects with custom CSS:
    <div class="relative"> <img src="image.jpg" alt="Background Image" class="w-full h-auto"> <div class="overlay"></div> </div>

    In this example, the .overlay div uses custom CSS with Tailwind’s @apply directive to simulate a ::before pseudo-element.

    Hope this is helpful!

    Best, Teodor

    Marked as helpful

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