Componente Tarjetas de producto
Un componente de tarjetas de producto de estilo brutalista con efectos responsivos y soporte de temas oscuros utilizando Tailwind CSS.
Código HTML
<div class="flex flex-wrap justify-center p-4 bg-gray-100 dark:bg-gray-800">
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 1</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 2</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-900">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Product Image">
<div class="p-6">
<h2 class="font-bold text-xl mb-2 text-gray-800 dark:text-gray-200">Product Title 3</h2>
<p class="text-gray-700 dark:text-gray-300">This is a brief description of the product. It is made from high-quality materials and is designed for everyday use.</p>
<div class="mt-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">Buy Now</button>
</div>
</div>
</div>
</div>Componentes relacionados
Ficha de producto Skeuomórfico
Un componente de tarjeta de producto skeuomórfico para un tablero, con estilo en escala de grises, complejidad media, responsivo con modo oscuro.
Componente Tarjetas de producto
Un componente de tarjetas de producto receptivo con microinteracciones, que utiliza un esquema de color en escala de grises y admite el modo oscuro. Ideal para fines de blog o consumo de contenido.
Componente de tarjetas de producto con interfaz de usuario de modo oscuro
Componente de tarjetas de producto con interfaz de usuario de modo oscuro y efectos responsivos mediante Tailwind CSS.