Scheda Prodotto E-commerce con Microinterazioni
Una semplice scheda prodotto per l'e-commerce con combinazione di colori triadica ed elementi di microinterazione da aggiungere al carrello e gradire, con reattività e supporto per la modalità scura.
Codice 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>Componenti correlati
Componente funzionale e-commerce
Componente di e-commerce minimalista dal design piatto con combinazione di colori triadica e supporto per la modalità oscura reattiva.
Controlli del lettore musicale Glassmorphic
Un componente di controllo del lettore musicale glassmorphic con toni seppia/marrone, con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura. È reattivo, supporta la modalità oscura ed è adatto per lo streaming musicale e le piattaforme audio.
Componenti funzionali Componente
Una scheda prodotto di e-commerce semplice e reattiva ispirata al 3D con una combinazione di colori analoga, che supporta la modalità scura.