Submitted 25 days ago

Time Tracking Dashboard

Mateusz• 260

@MateuszZalew

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Time tracking dashboard

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

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 🙂!

Community feedback

Teodor Jenkler• 3,720

@TedJenkler

Posted 25 days ago

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:

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.

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

Using ::before Element: Tailwind doesn’t natively support ::before sadly like they do hover:[value] , but you can achieve similar effects with custom CSS:

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

Please log in to post a comment

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