Les terres pittoresques du Canada avec des feuilles d'érable, des montagnes enneigées, des lacs bleu turquoise et Toronto. Admirez les sites touristiques à travers cette galerie de photos et voyez à quel point c'est facile à reproduire grâce à la magie de MDX et des classes tailwind.

Présente des images servies grâce au composant « next/image ». Les images stockées localement se trouvent dans un dossier avec le chemin suivant: /static/images/canada/[filename].jpg

Puisque nous utilisons mdx, nous pouvons créer une simple grille flexbox réactive pour afficher nos images avec quelques classes CSS tailwind.

Galerie

Implémentation

<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Maple](/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Lake](/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Mountains](/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Toronto](/static/images/canada/toronto.jpg)
  </div>
</div>

Avec MDX v2, on peut entrelacer markdown dans jsx comme indiqué dans cet exemple de code.

Crédits photo