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
Componente de la galería de productos
Componente de galería de productos responsivo con modo oscuro
Componente de la galería de productos
Un componente de galería de productos responsivo diseñado para el modo oscuro, con imágenes y avatares con Tailwind CSS.
Componente de la galería de productos
Componente de la galería de productos basado en los principios de Material Design, con diseño responsivo y soporte para temas oscuros. Incluye imágenes de marcador de posición.