Composant Cartes de produit
Un composant complexe de la carte produit avec des micro-interactions attrayantes et une palette de couleurs monochromatiques. Conçu pour les sites Web d’entreprise, il est réactif et prend en charge le mode sombre.
HTML Code
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 p-6">
<div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">$99.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
</div>
</div>
</div>
<div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
<img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">$89.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
</div>
</div>
</div>
<div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
<img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-100">$79.99</span>
<button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
</div>
</div>
</div>
</div>Composants associés
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 produit
Composant de cartes de produits skeuomorphiques pour le tableau de bord avec un design réactif et la prise en charge du thème sombre.
Fiches Produit Composant 52
Un composant de carte produit réactif utilisant le style de conception Glassmorphism avec la prise en charge du thème sombre et Tailwind CSS.