Skip to content
Submitted 12 days ago

Time Tracking Dashboard: ReactJS + TailwindCSS

react, tailwind-css
P
Aero Flamiano•220
@aflamiano-career
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?

I was able to work faster on the composition of the pages for different devices

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

I have spent so much time fixing border anti-aliasing. Unfortunately I wasn't able to find a solution.

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

How do I fix border anti-aliasing?

Code

Please log in to post a comment

Log in

Community feedback

  • Gavin•360
    @DesignAssembly

    Hi, the way i overcame the border antialising is to make the card bottom borders 18px for instance and then the info section the border size required. this way it hides this effect.

    In your case i would create:

    --radius-3xl: 1.5rem;

.rounded-bottom-3xl{
   border-bottom-right-radius: var(--radius-3xl);
   border-bottom-left-radius: var(--radius-3xl);
}

    then remove the overflow hidden from the container and place the image as a background element.

    That is how I solved the annoying antialising of the borders. My Solution Hope it helps

    Happy coding!

    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