Responsive component using tailwind css and the picture HTML tag.

Hello Nicolás Órdenes 👋

Impressive work with your solution for this challenge 👍

I've noticed the way you imported your fonts and I suppose there's nothing with since they work just fine. Here's code from Google fonts to import all of them in one link tag:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">

Since you're using more than one font, why not use CSS custom properties:

:root {
    --font-fraunces: 'Fraunces', serif;
    --font-montserrat: 'Montserrat', sans-serif;
}

Also the picture element you were referring to:

<picture>
    <source srcset="./images/image-product-desktop.jpg" media="(min-width: 576px)" />
    <img src="./images/image-product-mobile.jpg" alt="transparent perfume bottle" />
</picture>

There's nothing wrong with your code, those are just my suggestions. Cheers 👌