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 tarjetas de producto complejo y receptivo con un diseño corporativo/profesional que utiliza un esquema de color púrpura/violeta, adecuado para listados de productos de noticias o servicios profesionales. Incluye soporte para modo oscuro.
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo diseñado en un estilo minimalista con una combinación de colores pastel, adecuado para sitios web comerciales o corporativos, e incluye soporte para modo oscuro.
Componente Tarjetas de producto
Un componente de tarjetas de producto receptivo diseñado con elementos 3D y una combinación de colores vibrantes, que incorpora un tema oscuro para el blog y el consumo de contenido. Presenta una complejidad media con elementos interactivos para la participación del usuario.