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 carte produit réactif avec un design Glassmorphism, une palette de couleurs en niveaux de gris et une prise en charge du thème sombre. Il comprend plusieurs éléments interactifs adaptés aux interfaces de médias sociaux, tels que l’image du produit, le titre, la description, le prix et le bouton d’ajout au panier. La conception utilise des éléments translucides semblables à du verre givré avec des effets de flou. Aucun Javascript n’est utilisé, seulement du HTML avec des classes CSS Tailwind.
Composant Cartes de produit
Un composant de carte produit réactif conçu dans un style minimaliste avec une palette de couleurs pastel, adapté aux sites Web d’entreprise ou d’entreprise, et inclut la prise en charge du mode sombre.
Composant Cartes de produits
Un composant de carte produit réactif avec un style de conception Skeuomorphism, une palette de couleurs de terre et des interactions complexes, adapté à un portefeuille. Il inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style. Les images proviennent de picsum.photos et les avatars de randomuser.me.