Responsive Four Card Feature Section with Tailwindcss
Design comparison
Solution retrospective
for having managed to solve the problem of distributing the location of cards using Grid. I will continue using it for future challenges.
What challenges did you encounter, and how did you overcome them?aiming for desktop design, I separated the middle cards into a section with a grid that can distribute the 2 cards in this column, while the others have only 1 card.
What specific areas of your project would you like help with?any feedback for the solution is welcome!
Community feedback
- @Stephanie-DennehyPosted 4 months ago
HI Thiago,
Nice job with this challenge! I was thinking about completing this challenege using grid, but I opted for flexbox instead. The way you used grid and made the separate columns works really well and I enjoyed looking at your solution.
The only suggestion I have is to try to go back and combine some of the styles that are reused a lot (on the cards for example) into a custom class. Then you can apply all of the styles with one class to keep the HTML cleaner.
Here's a link in the Tailwind documentation to show you what I am referring to. https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
-Stephanie
Marked as helpful1
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