Four Card Features Section

Solution retrospective
I'm most proud of how clean and structured my HTML and layout turned out. I made good use of Tailwind CSS utility classes to keep the code minimal yet responsive and visually consistent. The grid layout works well across screen sizes, and the visual hierarchy (headings, spacing, and card components) effectively presents the content.
If I were to do this project again, I’d focus more on accessibility and fine-tuning the design polish. For example, I would improve the contrast for better readability, add proper alt text and ARIA attributes to support screen readers, and maybe add interactive elements like hover effects or animations to bring the UI to life. I'd also consider separating content into components or sections to make the structure more semantically rich.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was structuring the layout in a way that remained responsive across different screen sizes, especially when aligning the cards in the center and making sure the spacing felt balanced on both mobile and desktop. Tailwind CSS made this easier, but I still had to experiment with the grid system and spacing utilities to get it just right.
Another challenge was ensuring consistency in design while using utility-first classes. It’s easy to clutter HTML with too many classes, so I had to stay intentional and organized. I overcame this by sticking to Tailwind’s naming conventions and checking the design against the original challenge reference frequently.
What specific areas of your project would you like help with?I’d appreciate feedback on accessibility and semantic HTML. I want to make sure my structure is screen-reader-friendly and follows best practices for inclusive design. Also, I’d like advice on how to improve the visual polish of the layout—like adding subtle animations or hover effects using Tailwind CSS to make the cards feel more interactive and modern.
Lastly, if there are more efficient ways to organize or reuse Tailwind utility classes (like using components or applying custom styles), I’d love to learn about that too.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Ashmit-kansal
Amazing but I think you forgot to create specific grid design for tablet version.
You should create it using 2 columns and increasing the span to 2 for 1 and 4 section.
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