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 receptivo que utiliza Tailwind CSS con un estilo de diseño neumórfico, una combinación de colores complementaria y un diseño complejo adecuado para sitios web comerciales. Incluye soporte para el modo oscuro y utiliza imágenes de picsum.photos.
Componente de la galería de productos
Un componente de galería de productos complejo y receptivo con una estética de diseño 3D y una combinación de colores sepia/marrón, adecuado para aplicaciones de tecnología/SaaS. Incluye múltiples elementos interactivos y soporte para el modo oscuro.
Componente de la galería de productos
Un componente de galería de productos simple y receptivo con un estilo de diseño de cristal, esquema de color en blanco y negro con un acento brillante, adecuado para bolsas de trabajo o plataformas profesionales. Incluye soporte para modo oscuro.