Skip to content
Submitted 3 months ago

3-column-preview-card with React and Tailwind

Achinthya Dulshan•190
@AchinthyaDulshan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

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,820
    @TedJenklerPosted 3 months 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
    2
    Achinthya Dulshan•190
    @AchinthyaDulshanPosted 3 months 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.

    1

Please log in to post a comment

Log in with GitHub

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