Responsive component using tailwind css and the picture HTML tag.

Community feedback

• 

  Md5 dalton•1,430

  @md5dalton

  Posted over 2 years ago

  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 👌

  00