Componente Tarjetas de producto
Componente de tarjetas de producto con diseño 3D, efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="flex flex-wrap justify-center bg-gray-100 dark:bg-gray-900 py-8">
<div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
<span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">New</span>
</div>
<div class="p-6">
<h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Awesome Product Name</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a brief description of the amazing product.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$199.99</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
</div>
</div>
</div>
<div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
<span class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full">Sale</span>
</div>
<div class="p-6">
<h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Another Great Product</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Here's a description for another fantastic product.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$149.50</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
</div>
</div>
</div>
<div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
</div>
<div class="p-6">
<h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Product with no tag</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a product without a special tag.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$99.00</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
</div>
</div>
</div>
</div>Componentes relacionados
ArtDeco_ProductCards_Music
Componente de tarjetas de producto simple y receptivo con una estética Art Deco, con patrones geométricos y una combinación de colores cálidos/atardeceres, adecuados para plataformas de música y audio. Incluye soporte para modo oscuro.
Componente Tarjetas de producto
Un componente de tarjeta de producto responsivo con diseño de Glassmorphism, combinación de colores en escala de grises y compatibilidad con temas oscuros. Incluye múltiples elementos interactivos adecuados para las interfaces de redes sociales, como la imagen del producto, el título, la descripción, el precio y el botón Agregar al carrito. El diseño utiliza elementos translúcidos similares al vidrio escarchado con efectos de desenfoque. No se utiliza Javascript, solo HTML con clases CSS de Tailwind.
Componente Tarjetas de producto
Un componente simple de tarjeta de producto de comercio electrónico diseñado en estilo Material Design utilizando un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.