Componente de galería
Un componente de galería de estilo brutalista diseñado para el consumo de blogs o contenido, con un diseño responsivo con soporte para temas oscuros.
Código 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>Componentes relacionados
Componente de galería
Un componente de galería de estilo vintage retro con efectos responsivos y soporte para temas oscuros.
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.
Componente de Galería Inmobiliaria
Un componente de galería receptivo y profesional para listados de bienes raíces, con un diseño limpio, una combinación de colores pastel y soporte completo para el modo oscuro. Incluye tarjetas de propiedad con detalles, una sección de filtro/ordenación y una llamada a la acción clara.