Componente Galleria retrò
Un componente galleria reattivo con stile retrò/vintage, combinazione di colori vivaci e layout semplice per il consumo di blog/contenuti, con supporto per la modalità oscura. Utilizza Tailwind CSS.
Codice HTML
<div class="bg-gray-200 dark:bg-gray-800 p-6"> <div class="container mx-auto"> <h2 class="text-3xl font-bold mb-6 text-gray-800 dark:text-white">Gallery</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro1/500/300" alt="Gallery Image 1" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 1</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro2/500/300" alt="Gallery Image 2" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 2</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"> <img src="https://picsum.photos/seed/retro3/500/300" alt="Gallery Image 3" class="w-full h-48 object-cover"> <div class="p-4"> <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Image Title 3</h3> <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div></div>Componenti correlati
Galleria prodotti e-commerce
Un componente minimalista e reattivo per la galleria di prodotti per l'e-commerce, con toni oceano/blu, supporto per la modalità scura e visualizzazione interattiva delle immagini.
Componente Galleria Corporate/Professionale
Un componente di galleria di immagini reattivo e versatile con un'estetica aziendale/professionale, che utilizza una tavolozza di colori foresta/verde. Progettato per le piattaforme educative, fornisce un'interfaccia pulita e affidabile con supporto per la modalità oscura.
Componente Galleria
Un componente galleria reattivo che utilizza Tailwind CSS con lo stile Material Design, adatto per una dashboard con supporto per temi scuri.