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
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 avec interface utilisateur en mode sombre
Composant de cartes de produit avec interface utilisateur en mode sombre et effets réactifs à l’aide de Tailwind CSS.
Composant Cartes de produits
Fiches produits réactives avec effet verre dépoli Glassmorphism utilisant des couleurs pastel, avec prise en charge du mode sombre. Convient aux interfaces de médias sociaux.