Componente Galleria
Componente Galleria reattiva con design 3D, combinazione di colori analoga e supporto della modalità oscura per le interfacce dei social media.
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">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=1"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=2"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=3"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=4"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=5"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=6"
style="transform: translateZ(10px);"
/>
</div>
</div>
</div>
</div>Componenti correlati
Componente Galleria
Un semplice componente della galleria che utilizza Tailwind CSS, implementando uno stile di design Brutalism con una combinazione di colori triadica e il supporto del tema scuro per mostrare lavori o prodotti.
Componente Galleria
Un componente della galleria reattivo con effetto glassmorphism, colori vivaci e supporto per temi scuri, adatto per una dashboard.
Componente Galleria
Un componente galleria di ispirazione retrò/vintage con una combinazione di colori vivaci, una complessità moderata e un design reattivo con supporto per temi scuri. Progettato per il consumo di contenuti.