Componenti Galleria prodotti Componente della galleria dei prodotti

Componente della galleria dei prodotti

Un componente della galleria di prodotti con microinterazioni.

Anteprima

Codice HTML


<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="-m-1 flex flex-wrap md:-m-2">
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=1" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=2" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=3" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=4" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=5" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=6" />
      </div>
    </div>
  </div>
</div>

Componenti correlati

Watercolor_Artistic_Dating_Product_Gallery

Un componente complesso e reattivo della galleria di prodotti con uno stile di design "Acquerello/Artistico" e una combinazione di colori "Candy/Sweet", adatto per piattaforme di appuntamenti e social. Presenta più elementi interattivi, supporto per la modalità oscura e HTML semantico.

Aperto

Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti con un'interfaccia utente scura, combinazione di colori seppia/marrone, adatto per siti Web aziendali/aziendali. Include più schede prodotto con immagini, titoli, descrizioni e prezzi e supporta la modalità scura.

Aperto

Componente della galleria dei prodotti

Un componente complesso e reattivo della galleria di prodotti con un'estetica di progettazione 3D e una combinazione di colori seppia/marrone, adatto per applicazioni tecnologiche/SaaS. Include più elementi interattivi e supporto per la modalità oscura.

Aperto