Componente Tarjetas de producto
Un componente complejo de la tarjeta de producto con microinteracciones atractivas y una combinación de colores monocromática. Diseñado para sitios web comerciales, es responsivo y admite el modo oscuro.
Código HTML
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 p-6">
<div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">$99.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
</div>
</div>
</div>
<div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
<img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">$89.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
</div>
</div>
</div>
<div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
<img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">$79.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Tarjetas de producto
Tarjetas de producto responsivas con efecto de vidrio esmerilado Glassmorphism usando colores pastel, con soporte para modo oscuro. Adecuado para interfaces de redes sociales.
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.
Tarjetas de productos Art Deco Candy
Un componente de tarjetas de producto receptivo con un diseño inspirado en el Art Deco y una alegre combinación de colores dulces, adecuado para sistemas de reserva y reservas. Incluye soporte para modo oscuro.