results summary using flexbox

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have a suggestion regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Looks like the component button hover state background has not been set yet.

• Just add the following Tailwind utility classes for the button element

hover:bg-gradient-to-r from-purple-600 to-indigo-600

• Example,

<button class="button | bg-primary-500 text-neutral-100 hover:bg-gradient-to-r from-purple-600 to-indigo-600">
    Continue
</button>

• Now your component's button background for hover state has been set properly

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hello Nathan, first of all, congratulations on your project, it's really impressive.

Regarding your HTML question, just using a <main> tag would suffice. This is because your content doesn't precisely have a section that can be considered a header.

As for your second question, the way you've utilized custom properties is extremely intriguing. Did you draw inspiration from Tailwind, by any chance? Well, the tip I have for you is to consider using BEM. I'm not sure if it would fit seamlessly with the utility-first approach you've adopted, but it's worth experimenting. However, I understand it might make the workflow a bit more intricate, right? Perhaps it's best to either stick with BEM and a preprocessor or explore a CSS framework like Tailwind.

Regarding your third question, I would say yes. The buttons are shrinking too much, causing them to break on screens as small as 320px. It would be ideal to set a limit close to this breakpoint.

Once again, congratulations on completing your project! The utility-first approach you've employed is quite intriguing, and the way you've organized your HTML (class | util) is particularly clever. If anything I've mentioned isn't clear, please feel free to comment below.