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
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.
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.
Componente de la galería de productos
Un componente de galería de productos receptivo diseñado en un estilo brutalista con una combinación de colores pastel adecuada para las redes sociales. Cuenta con alto contraste, elementos de diseño audaces y está optimizado para el modo oscuro.