Composant Cartes de produit
Composant pour les médias sociaux avec une palette de couleurs triadiques sombres et une complexité modérée. Il utilise Tailwind CSS pour une conception réactive avec prise en charge du mode sombre, et inclut des espaces réservés pour les images et les avatars.
HTML Code
<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>Composants associés
Composant Cartes de produit
Un composant de cartes produit réactif avec des micro-interactions, utilisant une palette de couleurs en niveaux de gris et prenant en charge le mode sombre. Idéal pour les blogs ou la consommation de contenu.
ArtDeco_ProductCards_Music
Composant simple de cartes produit réactives avec une esthétique Art déco, avec des motifs géométriques et une palette de couleurs coucher de soleil/chaud, adapté aux plateformes musicales et audio. Inclut la prise en charge du mode sombre.
Composant Cartes de produits
Fiches produits réactives avec effet verre dépoli Glassmorphism utilisant des couleurs pastel, avec prise en charge du mode sombre. Convient aux interfaces de médias sociaux.