Componente de la galería de productos
Un componente de galería de productos responsivo con un diseño esqueuomórfico, combinación de colores monocromática y compatibilidad con temas oscuros, creado con Tailwind CSS. Cuenta con un diseño simple adecuado para blogs y consumo de contenido, imitando elementos del mundo real con sombras y degradados sutiles.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
<div class="container max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 border-gray-200 dark:border-gray-700 border-b-8 border-r-4 transition-all duration-300 ease-in-out">
<h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center tracking-tight drop-shadow-md">Our Gallery</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Vintage Camera</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">A classic camera with a modern touch, perfect for capturing timeless moments.</p>
<span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$299</span>
</div>
<!-- Product Card 2 -->
<div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Leather Journal</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">Handcrafted leather journal for your thoughts and creative expressions.</p>
<span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$45</span>
</div>
<!-- Product Card 3 -->
<div class="bg-gray-50 dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out p-6 border-t-4 border-l-4 border-gray-200 dark:border-gray-600 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-20 group-hover:opacity-30 rounded-2xl transition-opacity duration-300"></div>
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-xl mb-4 shadow-inner border border-gray-200 dark:border-gray-600">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Classic Turntable</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">Experience the warm, rich sound of vinyl with this elegant turntable.</p>
<span class="block text-right text-xl font-semibold text-gray-700 dark:text-gray-200 mt-4">$549</span>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de la galería de productos
Un componente de galería de productos responsivo simple diseñado con los principios de Material Design, con colores vibrantes y soporte para modo oscuro, adecuado para un tablero. Este componente utiliza Tailwind CSS para el estilo.
Componente de la galería de productos
Un componente responsivo de la Galería de Productos diseñado con Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y una combinación de colores complementaria. Incluye múltiples elementos interactivos aptos para el comercio electrónico con soporte para el modo oscuro.
Componente de la galería de productos
Un componente de galería de productos receptivo diseñado para la interfaz de usuario del modo oscuro, con colores complementarios, adecuado para interfaces de redes sociales.