Componente Schede prodotto
Un semplice componente reattivo della scheda prodotto con microinterazioni, progettato per le interfacce dei social media che utilizzano Tailwind CSS, che supporta il tema scuro e la combinazione di colori in scala di grigi.
Codice HTML
<div class="flex flex-col max-w-xs mx-auto rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white transition-colors duration-300">Product Title</h2>
<p class="mt-1 text-gray-600 dark:text-gray-300 transition-colors duration-300">Brief description of the product. Engaging text to attract users.</p>
<div class="flex items-center mt-3">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="ml-2 text-gray-700 dark:text-gray-200 transition-colors duration-300">User Name</span>
</div>
</div>
</div>
<div class="mt-4">
<button class="w-full py-2 px-4 bg-gray-800 text-white rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500 transition-colors duration-300">Add to Cart</button>
</div>Componenti correlati
Componente Schede prodotto
Schede prodotto Componente per i social media con una combinazione di colori triadica scura e complessità moderata. Utilizza Tailwind CSS per un design reattivo con supporto per la modalità oscura e include segnaposto per immagini e avatar.
Schede prodotto Art Deco Candy
Un componente di schede prodotto reattivo con un design ispirato all'Art Déco e un'allegra combinazione di colori caramella, adatto per i sistemi di prenotazione e prenotazione. Include il supporto per la modalità oscura.
Schede prodotto Componente - Agricoltura/Allevamento
Un componente della scheda prodotto reattivo progettato per l'agricoltura e i siti Web di allevamento, con tipografia pulita, sistemi di griglia e colori autunnali. Include il supporto per la modalità oscura.