Componente Galleria
Un componente della galleria in stile neumorfismo con toni della terra per scopi di blog/contenuti. Questo componente presenta un'interfaccia ricca con più elementi interattivi, design reattivo e supporto per temi scuri.
Codice HTML
<div class="container mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg"> <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Gallery</h1> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 1</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 2</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 3</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=4" alt="Gallery Image 4" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 4</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=5" alt="Gallery Image 5" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 5</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow"> <img src="https://picsum.photos/300/200?random=6" alt="Gallery Image 6" class="rounded-lg mb-2"> <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 6</h2> <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p> </div> </div> <div class="mt-6 text-center"> <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300">Author</h3> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="mx-auto rounded-full w-24 h-24"> <p class="text-gray-600 dark:text-gray-400">Author Name</p> </div></div>Componenti correlati
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.
Componente Galleria
Un componente galleria reattivo con un design piatto minimalista, con immagini e supporto per temi scuri utilizzando Tailwind CSS.