Componente Galleria
Un componente della galleria in stile brutalista progettato per il consumo di blog o contenuti, caratterizzato da un layout reattivo con supporto per temi scuri.
Codice HTML
<div class="p-5 bg-gray-100 dark:bg-gray-900">
<h1 class="text-3xl text-gray-800 dark:text-gray-200 font-bold mb-4">Gallery</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=1" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=2" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">Vivamus lacinia odio vitae vestibulum. Praesent feugiat amet et ligula.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=3" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minima veniam, quis nostrum exercitationem ullam.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=4" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 4</h2>
<p class="text-gray-700 dark:text-gray-300">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=5" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 5</h2>
<p class="text-gray-700 dark:text-gray-300">At vero eos et accusamus et iusto odio dignissimos ducimus.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=6" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 6</h2>
<p class="text-gray-700 dark:text-gray-300">Mollitia animi, id est laborum et dolorum fuga. Et harum quidem.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=7" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 7</h2>
<p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-40 object-cover" src="https://picsum.photos/300/200?random=8" alt="Gallery Image" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Image Title 8</h2>
<p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.</p>
</div>
</div>
</div>Componenti correlati
Componente Galleria
Componente Galleria reattiva con design 3D, combinazione di colori analoga e supporto della modalità oscura per le interfacce dei social media.
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.
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.