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 produit
Un composant de carte produit réactif avec une conception 3D, une palette de couleurs analogues et une prise en charge du mode sombre, conçu pour les interfaces de médias sociaux.
Composant Cartes de produits
Un composant de carte produit réactif avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du thème sombre, adapté à un tableau de bord. La conception comprend des espaces réservés pour les images et les détails du produit.
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.