Componente de galería
Un componente de galería de imágenes simple y receptivo diseñado para sitios web comerciales / corporativos, con un esquema de color triádico inspirado en los principios de Material Design. Incluye un tema oscuro para las preferencias del usuario y utiliza un diseño basado en cuadrículas.
Código HTML
<div class="bg-blue-50 dark:bg-gray-900 py-12">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-200 mb-8">Our Work</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/project1/400/300" alt="Project 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-2">Project Alpha</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of Project Alpha, highlighting its key features and success.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/project2/400/300" alt="Project 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-red-700 dark:text-red-300 mb-2">Project Beta</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of Project Beta, highlighting its key features and success.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/seed/project3/400/300" alt="Project 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-green-700 dark:text-green-300 mb-2">Project Gamma</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of Project Gamma, highlighting its key features and success.</p>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de galería
Un componente de galería de inspiración retro/vintage con una combinación de colores vibrantes, complejidad moderada y diseño receptivo con soporte para temas oscuros. Diseñado para el consumo de contenidos.
Galería de imágenes minimalistas en sepia para reservas
Un componente de galería de imágenes de diseño minimalista y plano con cálidos tonos sepia/marrón, adecuado para sistemas de reserva y reservas. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro.
Galería de criptomonedas skeuomórficas
Un complejo componente de galería skeuomórfica diseñado para aplicaciones de criptomonedas y blockchain, con colores complementarios, capacidad de respuesta y compatibilidad con el modo oscuro. Imita elementos del mundo real como botones empotrados y marcos en relieve.