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.
HTML Code
<div class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-8">Our Products</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Product Name 1</h3>
<p class="text-gray-400 text-sm 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 items-center justify-between">
<span class="text-lg font-bold">$19.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Product Name 2</h3>
<p class="text-gray-400 text-sm 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 items-center justify-between">
<span class="text-lg font-bold">$29.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Product Name 3</h3>
<p class="text-gray-400 text-sm 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 items-center justify-between">
<span class="text-lg font-bold">$39.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Cartes de produits
Un composant simple de carte produit e-commerce conçu dans le style Material Design à l’aide d’une palette de couleurs en niveaux de gris et d’un design réactif avec prise en charge du thème sombre.
Composant Cartes de produit
Un composant de carte produit simple et réactif avec des micro-interactions, conçu pour les interfaces de médias sociaux à l’aide de Tailwind CSS, prenant en charge le thème sombre et le schéma de couleurs en niveaux de gris.
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.