QR code component using HTML + CSS

What are you most proud of, and what would you do differently next time?

Having been used to styling with Tailwind, this was a nice refresher of pure CSS. I'm proud that the code is easy to understand and the component looks almost exactly like the design mockup.

In the future, I'd like to style harder mockups with my usual stack (React + Tailwind)

What challenges did you encounter, and how did you overcome them?

1. Centering a div vertically

Solution: Use a flex container with justify-content + align-items to center the component vertically + horizontally

2. Using box-shadow variables for a shadow on all 4 sides

Solution: set x and y offset to 0, set a blur radius, optional spread radius, set a color

box-shadow: 0 0 10px 0 hsl(218, 24%, 87%);

What specific areas of your project would you like help with?

How is my vertical-centering solution? Is flexbox the best way to do this?

Is there a cleaner way to organize my CSS?