Componente de la galería de productos
Una galería de productos responsiva con un estilo retro / vintage, con una combinación de colores complementaria y diseñada para sitios web comerciales / corporativos con soporte para modo oscuro.
Código HTML
<div class="max-w-6xl mx-auto p-5">
<h2 class="text-3xl font-bold text-center text-amber-500">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 1</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$29.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 2</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$39.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 3</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$19.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 4</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$49.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 5</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$59.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 6</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$69.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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 galería de productos receptivo con soporte para 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.