Componente Componenti multimediali
Un componente multimediale per l'e-commerce con microinterazioni, combinazione di colori in scala di grigi, complessità moderata, design reattivo e supporto per temi scuri.
Codice HTML
<div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
<div class="relative">
<img class="object-cover w-full h-48 transition-transform duration-300 transform group-hover:scale-105" src="https://picsum.photos/400/300?random=1"
alt="Product Image">
<div
class="absolute top-0 left-0 flex items-center justify-center w-full h-full text-white transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
</path>
</svg>
</div>
</div>
<div class="px-4 py-3">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Product Name</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Short product description goes here.</p>
<div class="flex items-center justify-between mt-3">
<span class="text-xl font-bold text-gray-800 dark:text-white">$29.99</span>
<button
class="px-3 py-2 text-xs font-medium text-white uppercase transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">
Add to Cart
</button>
</div>
</div>
</div>
Componenti correlati
Brutalismo Pastello Media Componente
Un componente multimediale semplice e brutalista con una combinazione di colori pastello, progettato per un blog. Reattivo con supporto per la modalità oscura.
Componente multimediale Glassmorphic
Un componente della scheda multimediale reattivo con un design glassmorphism (effetto vetro smerigliato) costruito con Tailwind CSS. Presenta un segnaposto per immagini (da picsum.photos) con un'icona di riproduzione al passaggio del mouse, contenuti testuali, una sezione autore con un avatar (da randomuser.me) e pulsanti di azione. Il componente supporta la modalità oscura utilizzando le varianti "dark:" di Tailwind CSS ed è reattivo su varie dimensioni dello schermo. Non è richiesto alcun JavaScript. Per un effetto visivo ottimale, posizionare questo componente su uno sfondo a contrasto. La funzionalità della modalità oscura presuppone una configurazione CSS Tailwind appropriata (ad esempio, 'darkMode: "class"' nel tuo tailwind.config.js).
Componenti multimediali Componente 39
Un componente multimediale progettato con l'interfaccia utente della modalità oscura, con effetti reattivi e supporto per il tema scuro utilizzando Tailwind CSS.