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
grille-de-produits-monochrome-retro-monochrome
Un composant de grille de produits de commerce électronique rétro/vintage simple et réactif stylisé dans une palette violette monochromatique avec prise en charge du thème sombre. Le design évoque la nostalgie des années 80/90 avec une mise en page basique et des éléments minimaux, parfaits pour les expériences d’achat en ligne.
Composant Composants de commerce électronique
Un composant de commerce électronique réactif avec des micro-interactions, une palette de couleurs analogue et une prise en charge du thème sombre.
Composants E-commerce Skeuomorphic
Un composant E-commerce Skeuomorphic complexe, réactif et monochromatique pour les sites Web d’entreprise avec prise en charge du mode sombre.