Product Preview Card using Tailwind CSS

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

I normally rely on the Figma design file to nail the spacing between elements, but this time without it provided I had to use my best judgment. I believe I did well with the spacing between elements and it looks fairly close to the design.

I also learned about the picture and source element from the web.dev resource, and I will continue using it for other projects.

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

At the custom breakpoint I had set, I noticed that once the layout shifted, that there was a strange gap under the image for the first couple of pixels past the breakpoint before it grew. I noticed it seemed to be due to the text wrapping at the point of the breakpoint. I decided to use the breakpoint to decrease the amount of padding once the layout shifted and it didn't produce the gap between the image and the bottom of the card.