Componente Galleria
Un componente galleria reattivo con un design piatto minimalista, con immagini e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=1" alt="Random Image 1" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=2" alt="Random Image 2" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=3" alt="Random Image 3" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=4" alt="Random Image 4" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=5" alt="Random Image 5" class="w-full h-auto object-cover">
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
<img src="https://picsum.photos/200/300?random=6" alt="Random Image 6" class="w-full h-auto object-cover">
</div>
</div>
</div>Componenti correlati
Componente Galleria
Un componente della galleria reattivo con uno stile di progettazione 3D, caratterizzato da profondità e coinvolgimento attraverso effetti di ombreggiatura e passaggio del mouse. Supporta temi scuri e chiari.
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.