Composants du commerce électronique
Un composant de commerce électronique de complexité modérée avec un design en mode sombre utilisant des couleurs de terre pour une présentation de portefeuille.
HTML Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4">Featured Products</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1" />
<div class="p-4">
<h3 class="text-xl font-medium mb-2">Product Title 1</h3>
<p class="text-gray-300 mb-4">Brief description of the product.</p>
<span class="text-yellow-500 font-bold">$29.99</span>
<button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
</div>
</div>
<div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2" />
<div class="p-4">
<h3 class="text-xl font-medium mb-2">Product Title 2</h3>
<p class="text-gray-300 mb-4">Brief description of the product.</p>
<span class="text-yellow-500 font-bold">$49.99</span>
<button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
</div>
</div>
<div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3" />
<div class="p-4">
<h3 class="text-xl font-medium mb-2">Product Title 3</h3>
<p class="text-gray-300 mb-4">Brief description of the product.</p>
<span class="text-yellow-500 font-bold">$19.99</span>
<button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
</div>
</div>
</div>
</div>
Composants associés
Carte e-commerce pour les réseaux sociaux
Composant de commerce électronique axé sur les médias sociaux, le style Glassmorphism, la palette de couleurs monochromatiques, la mise en page complexe, la prise en charge réactive et le thème sombre.
Composant de tableau de bord e-commerce
Un composant simple de tableau de bord de commerce électronique avec un design brutaliste et dynamique, avec une mise en page réactive et une prise en charge du thème sombre.
Fiche produit e-commerce rétro
Une fiche produit e-commerce rétro/vintage avec un design réactif et une prise en charge du mode sombre.