Componente de la galería de productos
Componente de galería de productos receptivo con soporte para modo oscuro
Código HTML
<div class="dark:bg-gray-900">
<div class="container mx-auto py-8 px-4">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-8">Our Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-teal-500">$99.99</span>
<button class="bg-teal-500 text-white px-4 py-2 rounded hover:bg-teal-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-orange-500">$149.50</span>
<button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-purple-500">$199.00</span>
<button class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-pink-500">$75.50</span>
<button class="bg-pink-500 text-white px-4 py-2 rounded hover:bg-pink-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product5/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 5</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-green-500">$120.00</span>
<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">View Details</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product6/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">Product Name 6</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-red-500">$250.80</span>
<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">View Details</button>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de la galería de productos - Diseño de materiales
Un componente de la galería de productos inspirado en Material Design con diseño responsivo, efectos de desplazamiento y compatibilidad con temas oscuros. Utiliza Tailwind CSS.
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.
Galería de productos de Cyberpunk
Un componente de galería de productos responsivo con una estética cyberpunk, con fondos oscuros, colores de acento brillantes (azul eléctrico) y elementos interactivos sutiles, adecuados para exhibir productos o un portafolio.