Product Component TailwindCSS

Hello ! There is a tag in html named <picture> and the common use for this tag is deal with responsive images and you can use that to change the image based on screen width.

You can learn how to use it in

https://www.w3schools.com/tags/tag_picture.asp

feel free to check my html code here

<div class="product-photo">

    <picture>
      <source
        media="(min-width: 30rem)"
        srcset="./img/image-product-desktop.jpg"
      />
      <img src="./img/image-product-mobile.jpg" alt="" />
    </picture>

check the use in tailwind too :) hope this helps