Responsive Product Preview Card Component using Tailwind CSS

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

I'm most proud of completing the project with a fully responsive layout using Tailwind CSS. I was able to replicate the design closely across mobile and desktop views, while keeping the code clean and well-structured.

What I would do differently next time

Next time, I would focus more on using Figma to extract exact spacing, font sizes, rather than relying on estimation. This would help me achieve pixel-perfect results and follow better design consistency.

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

• One of the main challenges I faced was making the image responsive using the <picture> element. At first, the image didn’t appear because I forgot to include the fallback <img> tag inside the <picture> block.

• I also had some issues with the custom color hsl(30, 38%, 92%) not applying correctly in Tailwind CSS. I later discovered that Tailwind v4 uses a CSS-first approach, so I needed to define custom colors using @theme in the CSS file instead of relying on tailwind.config.js.

I researched how the <picture> element works and learned that it needs an <img> fallback to display images correctly.
For the color issue, I read the official Tailwind v4 docs and realized I had to adapt my workflow to the new configuration method.

These challenges helped me better understand responsive images, Tailwind’s new CSS-first configuration, and how to troubleshoot layout issues effectively.

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

• Responsive layout best practices: While the project looks good on different screen sizes, I’d love feedback on whether I used the most efficient and scalable layout techniques in Tailwind CSS.

• Design accuracy: I did my best to match the design using screenshots and estimation. I'd appreciate any feedback on how to improve pixel-perfect implementation using Figma.

Any suggestions or code improvements in these areas would be really helpful!