Galleria prodotti Componente - Material Design
Un componente della galleria prodotti ispirato al Material Design con design reattivo, effetti al passaggio del mouse e supporto per temi scuri. Utilizza Tailwind CSS.
Codice HTML
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
<div class="dark:bg-gray-800 dark:text-white">
<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">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
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">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
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">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
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">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
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">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
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">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=6"
/>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente della galleria dei prodotti
Un componente della galleria di prodotti con un design brutalista, una combinazione di colori in scala di grigi e una complessità moderata. È progettato per uno scopo di dashboard ed è reattivo con supporto per il tema scuro.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato con i principi del Material Design, con colori color terra, adatto per i cruscotti e che supporta la modalità scura.
Componente della galleria dei prodotti
Un semplice componente della galleria di prodotti progettato con elementi 3D per la profondità, utilizzando una combinazione di colori triadica. È reattivo e supporta il tema scuro, adatto per mostrare lavori o prodotti.