Skip to content
Submitted 12 months ago

3-column-preview-card with React and Tailwind

react, tailwind-css
Achinthya Dulshan•320
@AchinthyaDulshan
A solution to the 3-column preview card component 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?

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Teodor Jenkler•4,040
    @TedJenkler

    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

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