Ficha de producto de comercio electrónico con microinteracciones
Una tarjeta de producto de comercio electrónico simple con esquema de color triádico y elementos de microinteracción para agregar al carrito y dar me gusta, con capacidad de respuesta y soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<div class="relative group">
<img class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/300?random=1" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
<button class="flex-1 bg-yellow-500 text-gray-900 py-2 rounded-md font-semibold text-sm opacity-0 group-hover:opacity-100 group-hover:translate-y-0 translate-y-2 transition-all duration-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
Quick View
</button>
</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 truncate">Stylish Summer Dress</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Women's Apparel</p>
<div class="flex items-center justify-between mt-3 mb-4">
<span class="text-xl font-bold text-teal-600 dark:text-teal-400">$49.99</span>
<div class="flex space-x-2">
<button class="p-2 rounded-full text-gray-400 hover:text-red-500 hover:bg-red-100 dark:hover:bg-red-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 group">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</button>
<button class="p-2 rounded-full text-gray-400 hover:text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 group">
<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 11h-4V7a1 1 0 00-2 0v4H7a1 1 0 000 2h4v4a1 1 0 002 0v-4h4a1 1 0 000-2z"/></svg>
</button>
</div>
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded-md font-semibold text-sm transition-all duration-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transform hover:scale-105 active:scale-95">
Add to Cart
</button>
</div>
</div>
</div>Componentes relacionados
Controles del reproductor de música Glassmorphic
Un componente de control de reproductor de música glassmorphic con tonos sepia/marrón, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque. Es responsivo, admite el modo oscuro y es adecuado para plataformas de audio y transmisión de música.
Componentes funcionales Componente
Una tarjeta de producto de comercio electrónico simple, receptiva e inspirada en 3D con un esquema de color análogo, compatible con el modo oscuro.
Componente funcional de comercio electrónico
Componente de comercio electrónico de diseño plano minimalista con esquema de color triádico y soporte de modo oscuro receptivo.