Submitted 16 days ago

Blog Preview Card - Next.js/Tailwind

#next#react#tailwind-css

Nick• 90

@nickabate

Preview site View code

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Constantly improving my proficiency with Tailwind and speeding up my development flow with new tools.

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

Remembering to utilize utility classes, and avoiding creating redundant classes.

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

Any efficiencies I might have missed with Tailwind like utility classes which may have been utilized better.

Community feedback

Abdul Khalid 🚀• 72,180

@0xabdulkhalid

Posted 16 days ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

ADDING HOVER STATE 🪄:

I just wanted to share a small suggestion which may helps you to provide a visually appealing hint. What about adding hover state for the card ?

Just add the following utility classes for section element

transition-shadow duration-300 hover:shadow-[12px_13px_0px_#000]

Trust me this will after this effect your solution would be perfectly finished if you add this as a finishing touch!

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

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