Componente de galería retro
Un componente de galería receptivo con estilo retro / vintage, combinación de colores vibrantes y diseño simple para el consumo de blog / contenido, con soporte para modo oscuro. Utiliza Tailwind CSS.
Código 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>Componentes relacionados
Componente de galería
Un componente de galería interactivo diseñado en Material Design con un esquema de color análogo para un propósito.
Galería de productos de comercio electrónico
Un componente de galería complejo, responsivo y compatible con temas oscuros con un diseño minimalista, una combinación de colores complementaria y múltiples elementos interactivos adecuados para el comercio electrónico.
Componente de la galería de neumorfismo
Un componente de galería neumórfica sensible con soporte para modo oscuro. Las imágenes son marcadores de posición de picsum.photos y los avatares de randomuser.me.