Componente de la galería de productos
Un componente de la galería de productos diseñado en el estilo Material Design con una combinación de colores triádica. Cuenta con diseños basados en cuadrículas, animaciones responsivas y admite temas oscuros. La galería incluye imágenes y avatares y es adecuada para un tablero.
Código HTML
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 1. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<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-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 2. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image 3" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 3. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<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-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product Image 4" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 4. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product Image 5" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 5</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 5. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<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-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Brutalist_RealEstate_Product_Gallery
Un componente complejo de galería de productos de estilo brutalista para listados de bienes raíces, con tonos joya, colores saturados intensos, alto contraste y compatibilidad con modo oscuro. Diseñado para mostrar detalles de la propiedad con múltiples elementos interactivos.
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.