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.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8">Social Media Product Cards</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Cool Gadget Pro</h3>
<span class="text-lg font-bold text-teal-500 dark:text-teal-400">$299</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Elevate your digital experience with this cutting-edge gadget, featuring advanced capabilities.</p>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">By John Doe</span>
</div>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>❤️ 1.2K Likes</span>
<span>💬 245 Comments</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Smartwatch Elegance</h3>
<span class="text-lg font-bold text-rose-500 dark:text-rose-400">$179</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stay connected and stylish with this elegant smartwatch, designed for modern living.</p>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">By Jane Smith</span>
</div>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>❤️ 980 Likes</span>
<span>💬 180 Comments</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Wireless Headphones</h3>
<span class="text-lg font-bold text-amber-500 dark:text-amber-400">$120</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Immerse yourself in rich audio with these comfortable and high-fidelity wireless headphones.</p>
<div class="flex items-center mb-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300 text-sm">By Peter Jones</span>
</div>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
<span>❤️ 1.5K Likes</span>
<span>💬 300 Comments</span>
</div>
<button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Schede prodotto
Componente Schede prodotto con design 3D, effetti reattivi e supporto per temi scuri.
Componente Schede prodotto
Un semplice componente della scheda prodotto per l'e-commerce progettato in stile Material Design utilizzando una combinazione di colori in scala di grigi e un design reattivo con supporto per il tema scuro.
Componente Schede prodotto
Un componente della scheda prodotto reattivo con design 3D, combinazione di colori analoga e supporto per la modalità scura, progettato per le interfacce dei social media.