Componente Tarjetas de producto
Un componente de tarjeta de producto de estilo brutalismo con alto contraste, efectos responsivos y compatibilidad con el modo oscuro.
Código HTML
<div class="flex flex-wrap justify-center space-x-4 space-y-4 p-5 bg-gray-100 dark:bg-gray-800">
<div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
<p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$29.99</span>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic2/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
<p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$39.99</span>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 shadow overflow-hidden transition-transform transform hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic3/400/300" alt="Product Image">
<div class="p-4">
<h2 class="font-bold text-xl text-gray-900 dark:text-white">Product Title</h2>
<p class="text-gray-700 dark:text-gray-400">This is a brief description of the product, explaining its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-gray-800 dark:text-gray-200 font-bold text-lg">$49.99</span>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring">Add to Cart</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo diseñado en estilo Material Design, con una combinación de colores en escala de grises. Incluye una imagen, un título, una descripción y un botón con soporte para el modo oscuro mediante Tailwind CSS.
Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo con un estilo de diseño Skeuomorphism, una combinación de colores en tonos tierra e interacciones complejas, adecuado para una cartera. Incluye soporte para temas oscuros y utiliza Tailwind CSS para el estilo. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.
Componente de tarjetas de producto - Agricultura/Ganadería
Un componente de tarjeta de producto receptivo diseñado para sitios web de agricultura y ganadería, con tipografía limpia, sistemas de cuadrícula y colores otoñales. Incluye soporte para modo oscuro.