Componente Galleria
Un componente galleria reattivo che utilizza Tailwind CSS con lo stile Material Design, adatto per una dashboard con supporto per temi scuri.
Codice HTML
<div class="container mx-auto p-6">
<h2 class="text-3xl font-bold text-center text-gray-900 dark:text-gray-100 mb-6">Gallery Component</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/300" alt="Image 1" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 1.</p>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/301" alt="Image 2" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 2.</p>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/302" alt="Image 3" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 3.</p>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/303" alt="Image 4" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 4</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 4.</p>
</div>
<!-- More cards -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/304" alt="Image 5" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 5</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 5.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/200/305" alt="Image 6" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Image Title 6</h3>
<p class="text-gray-600 dark:text-gray-300">Description of image 6.</p>
</div>
</div>
</div>Componenti correlati
Componente Galleria
Un componente della galleria reattivo con design Glassmorphism, combinazione di colori analoga, layout complesso e supporto per temi scuri per l'e-commerce.
Componente Galleria
Un componente galleria reattivo che utilizza Tailwind CSS con design Skeuomorphism, combinazione di colori pastello e complessità moderata per scopi di social media. Include il supporto per la modalità oscura e utilizza picsum.photos per le immagini e randomuser.me per gli avatar.
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.