Componente de la galería de productos
Un componente de galería de productos con un diseño brutalista, una combinación de colores en escala de grises y una complejidad moderada. Está diseñado para un propósito de tablero y es receptivo con soporte para temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6">
<div class="container mx-auto">
<h2 class="text-3xl font-bold mb-6 border-b-4 border-gray-900 dark:border-white pb-2">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="border-4 border-gray-900 dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
<h3 class="text-xl font-bold mb-2">Product Name 1</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the product goes here. It's a fantastic product that will change your life.</p>
<span class="text-2xl font-bold absolute top-4 right-4">$199.99</span>
<button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
<div class="border-4 border-gray-900 dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
<h3 class="text-xl font-bold mb-2">Product Name 2</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Another amazing product with features you won't believe. Get yours today!</p>
<span class="text-2xl font-bold absolute top-4 right-4">$249.00</span>
<button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
<div class="border-4 border-gray-900 dark:border-white p-4 relative">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-white">
<h3 class="text-xl font-bold mb-2">Product Name 3</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">You won't want to miss out on this one. Limited stock available!</p>
<span class="text-2xl font-bold absolute top-4 right-4">$99.50</span>
<button class="mt-4 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente de la galería de productos
Un componente responsivo de la Galería de Productos diseñado con Glassmorphism, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y una combinación de colores complementaria. Incluye múltiples elementos interactivos aptos para el comercio electrónico con soporte para el modo oscuro.
Componente de la galería de productos
Un componente simple de la galería de productos diseñado con elementos 3D para la profundidad, utilizando un esquema de color triádico. Es responsivo y admite temas oscuros, adecuados para mostrar trabajos o productos.