Componente Tarjetas de producto
Componente de tarjeta de producto con estilo brutalista, combinación de colores monocromática, nivel de complejidad complejo para fines de comercio electrónico.
Código HTML
<div class="dark:bg-stone-900 bg-stone-100 p-6">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 1</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$49.99</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$59.99</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 2</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$75.00</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$90.00</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 3</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$120.00</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$150.00</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjetas de producto receptivo diseñado con estilo de skeuomorfismo, combinación de colores de tonos tierra y compatibilidad con temas oscuros. Ideal para cuadros de mando.
Componente Tarjetas de producto
Un componente de tarjetas de producto responsivo diseñado utilizando los principios de Material Design con Tailwind CSS. Es compatible con el modo oscuro y presenta sombras y diseños basados en cuadrículas.
Componente Tarjetas de producto
Componente de tarjetas de producto skeuomórficas para tablero con diseño receptivo y soporte de tema oscuro.