Submitted about 1 month ago

3-column-preview-card with React and Tailwind

Achinthya Dulshan• 180

@AchinthyaDulshan

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

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

That time I used React with props and it is easy when using components. Next time I use props when it is necessary. Also that time I added more configurations on tailwind and it is easy when we work with our own project.

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

When I passing the props firstly I create all props as array and passed values to that all props in map. that is descriptive but it is add more repetitive codes then I pass card object as a prop and access values in card component. when dealing with 3-card component we need to add rounded borders, 3 cards are child elements then I used overflow-hidden to get the rounded borders. In hover effect in buttons I used bg-transparent when hover rather that adding color on hover

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

when I tried to change background color of buttons in hover using custom colors which are defined in tailwind.config.js it doesn't work.

Any other suggestions regarding my solution are welcome.

Community feedback

Teodor Jenkler• 3,720

@TedJenkler

Posted about 1 month ago

Hi again,

Nice project! It looks good on all devices and is fully responsive. One minor improvement would be to add a breakpoint for 650px and cap the text width to 50% so it doesn’t get too wide on tablets and small laptops. It’s also a good practice to add custom Tailwind breakpoints using the config file.

I checked your color configuration, and it seems fine to me. If you’re experiencing issues, it might be a CSS specificity problem. A workaround would be to add an ID with regular CSS, like #button:hover { /* logic here */ }, because this would override the Tailwind classes if hover:text-colorname isn’t working for you when applied dynamically.

Otherwise, nice job using a modular React approach!

Hope this was helpful.

Best, Teodor

Marked as helpful

Achinthya Dulshan• 180

@AchinthyaDulshan

Posted about 1 month ago

Hi @TedJenkler

Your feedback on my project is highly appreciated. Indeed, adding a 650px breakpoint seems like a good idea. I will apply this insight to significantly improve my next project.

Thank you, Achinthya.

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