Componente de la galería de productos
Un componente de galería de productos responsivo con estilo de diseño Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y compatibilidad con temas oscuros. Muestra imágenes de productos y avatares de usuarios.
Código HTML
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="max-w-4xl w-full">
<h2 class="text-2xl font-bold text-center mb-6 dark:text-white">Product Gallery</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1 with details.</p>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">By John Doe</span>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2 with details.</p>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">By Jane Smith</span>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3 with details.</p>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">By Mike Johnson</span>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 bg-opacity-90 backdrop-blur-lg rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4 with details.</p>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">By Sarah Connor</span>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
LujoMonocromáticoProductoGalería
Un componente de galería de productos simple y elegante con un esquema de color monocromático, diseñado para plataformas de música/audio. Cuenta con capacidad de respuesta completa y compatibilidad con el modo oscuro.
Componente de la galería de productos
Un componente de galería de productos receptivo con una interfaz de usuario oscura, combinación de colores sepia/marrón, adecuado para sitios web comerciales/corporativos. Incluye varias tarjetas de producto con imágenes, títulos, descripciones y precios, y es compatible con 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.