Componente della galleria dei prodotti
Un componente della galleria di prodotti con microinterazioni.
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
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per la modalità scura, con immagini e avatar con Tailwind CSS.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato in stile brutalismo con una combinazione di colori pastello adatta ai social media. Presenta un contrasto elevato, elementi di design audaci ed è ottimizzato per la modalità scura.
Componente della galleria dei prodotti
Componente della galleria dei prodotti reattivo con supporto per il tema scuro, stile Material Design, combinazione di colori dei toni della terra, complessità semplice, per scopi di e-commerce.