All solutions

This time I think I did good.

Didn't have to do any responsiveness, didn't see where it would be needed.

What I usually find difficult is working with widths, specially when I'm using something like a display grid and place items center, this time I used max-width on the card, don't know if it's the best approach, maybe is there something better?

Any comments on how I made the change from desktop to mobile? Basically I used grid to center everything, and once the width is less than the tailwind "sm" breakpoint, it goes to block with some margins auto.

I don't know if that's a "good way", it works tho.

Hey guys, feel free to leave any comments regarding the responsiveness, is it good enough, is there a certain point that isn't too good?

I don't have any questions, only list things that I can improve.

• Create better root variables (only save the values of the hsl) in order to be able to use that variable with some opacity.
• Since I'm using React I should've created a component for those 4 sections.
• I used 2 local variables in the class of those 4 sections in order to change them within the html, but probably it's not a good a idea, since in the Developer Tools it will appear a cluster of inline styles.
• Probably give better class names, I used a "kinda BEM" convention.

What I find difficult:

1. Centering things the way I want and the most effective/correct way is still hard, I'm still learning how to use flex correctly, so I just end up using flex almost everywhere.
2. I didn't end up making things responsive, besides a scuffed flex-wrap for the numbers, I ended up having a problem with the sizing of the overall "form", so I used a fixed width. Even though know I could've used max/min width to make it easier.

I will eventually redo this whenever I get more experience in React and CSS.