Composant Cartes de produit
Composant de cartes de produit avec conception 3D, effets réactifs et prise en charge du thème sombre.
HTML Code
<div class="flex flex-wrap justify-center bg-gray-100 dark:bg-gray-900 py-8">
<div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
<span class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full">New</span>
</div>
<div class="p-6">
<h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Awesome Product Name</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a brief description of the amazing product.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$199.99</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
</div>
</div>
</div>
<div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
<span class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-3 py-1 rounded-full">Sale</span>
</div>
<div class="p-6">
<h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Another Great Product</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">Here's a description for another fantastic product.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$149.50</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
</div>
</div>
</div>
<div class="m-4 max-w-sm bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg transform transition-transform duration-500 hover:scale-105 hover:shadow-2xl">
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-500 hover:scale-110" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
</div>
<div class="p-6">
<h3 class="font-bold text-xl text-gray-900 dark:text-white mb-2">Product with no tag</h3>
<p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a product without a special tag.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-white">$99.00</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:scale-110">Add to Cart</button>
</div>
</div>
</div>
</div>Composants associés
Composant Cartes de produit
Un composant de carte produit réactif conçu pour le mode sombre, avec des couleurs vives et de multiples éléments interactifs adaptés aux blogs et à la consommation de contenu.
Composant Cartes de produit
Un composant de cartes produit réactif conçu avec le style skeuomorphism, la palette de couleurs des tons de terre et la prise en charge du thème sombre. Idéal pour les tableaux de bord.
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.