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.
HTML Code
<!-- Product Cards Component -->
<div class="p-10 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
<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">Product Title 1</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
</div>
<img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<p class="text-gray-700 dark:text-gray-400 text-base mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$199.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
<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">Product Title 2</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
</div>
<img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<p class="text-gray-700 dark:text-gray-400 text-base mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$299.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105">
<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">Product Title 3</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-300">Category</span>
</div>
<img class="w-full h-48 object-cover rounded mb-4" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<p class="text-gray-700 dark:text-gray-400 text-base mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-green-600 dark:text-green-400">$399.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-md transition duration-300">View Details</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Cartes de produit
Il s’agit d’un composant complexe et réactif de cartes de produits avec un design d’entreprise/professionnel utilisant une palette de couleurs violet/violet, adapté aux actualités ou aux listes de produits de services professionnels. Inclut la prise en charge du mode sombre.
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
Composant de carte de produit avec style brutalisme, schéma de couleurs monochromatique, niveau de complexité complexe à des fins de commerce électronique.