Design comparison
Solution retrospective
I think this went well, it was an easy challenge if you know grids somewhat well.
The only thing that was somewhat cumbersome was that you couldn't use grid-rows-2
of tailwind easily because it would make the rows the same height which is not how the design works.
Also for the cards it would have been better to use components to reuse the styles (and make the use of different card variants/modifiers more explicit), but I deciede to still keep it simple for now.
I also kept it simple for the mobile design, I just used a padding (as per the figma) but allowed the cards to keep growing. The desktop design just uses a max-width for the main section, which is centered. I'm not entirely sure if this is the best way to go.
Community feedback
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