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 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 réactif conçu avec des éléments 3D et une palette de couleurs vives, intégrant un thème sombre pour la consommation de blog et de contenu. Il présente une complexité moyenne avec des éléments interactifs pour l’engagement de l’utilisateur.
Composant Cartes de produit
Un composant de carte produit réactif avec des micro-interactions dans des tons Terre, fournissant une prise en charge du thème sombre pour la présentation du portefeuille.