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 progettato in Material Design con una combinazione di colori analoga per uno scopo di dashboard.
Galleria criptomorfa skeuomorfa
Un complesso componente di galleria scheumorfica progettato per applicazioni di criptovaluta e blockchain, con colori complementari, reattività e supporto per la modalità oscura. Imita elementi del mondo reale come i pulsanti incassati e le cornici in rilievo.
Componente della galleria in scala di grigi Skeuomorphism
Galleria fotografica reattiva con design Skeuomorphism, combinazione di colori in scala di grigi e layout complesso per i social media. Include il supporto per il tema scuro.