Composant Cartes de produit
Un composant de carte produit réactif avec des micro-interactions, un design monochromatique et une prise en charge du thème sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<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-500 hover:scale-105 hover:shadow-lg">
<img class="w-full h-48 object-cover transition duration-500 ease-in-out transform hover:scale-110" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$19.99</span>
<button class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-lg">
<img class="w-full h-48 object-cover transition duration-500 ease-in-out transform hover:scale-110" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
<button class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-lg">
<img class="w-full h-48 object-cover transition duration-500 ease-in-out transform hover:scale-110" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$39.99</span>
<button class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1">
Add to Cart
</button>
</div>
</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.
Composant Cartes de produit
Un composant de cartes produit de style brutaliste avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.