3-column-preview-card with React and Tailwind
Design comparison
Solution retrospective
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
- @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 helpful2@AchinthyaDulshanPosted 3 months agoHi @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 GitHubJoin 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