Composant Composants de commerce électronique
Un composant de commerce électronique réactif conçu pour le mode sombre avec une palette de couleurs triadiques, avec des listes de produits, une icône de panier d’achat et un avatar de l’utilisateur.
HTML Code
<div class="bg-gray-900 text-white min-h-screen p-8">
<header class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold">ShopEase</h1>
<div class="relative">
<button class="bg-blue-600 p-2 rounded-full hover:bg-blue-500 focus:outline-none">
<svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 2H7v2h6a1 1 0 011 1v12a1 1 0 01-1 1H7a1 1 0 01-1-1v-6H4v7a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"/></svg>
</button>
<span class="absolute top-0 right-0 bg-red-600 text-white text-xs font-bold rounded-full px-1">3</span>
</div>
</header>
<main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Product Title</h2>
<p class="text-gray-400">$29.99</p>
<button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Another Product</h2>
<p class="text-gray-400">$54.99</p>
<button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
</div>
</div>
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold">Cool Gadget</h2>
<p class="text-gray-400">$19.99</p>
<button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
</div>
</div>
</main>
<footer class="mt-10 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
<p class="font-semibold">Welcome, User!</p>
</footer>
</div>Composants associés
Fiche produit e-commerce Neumorphic
Un composant de carte produit e-commerce de style soft UI (Neumorphism) avec des couleurs en niveaux de gris, conçu pour les sites Web d’entreprise. Il comporte une image de produit, un titre, un prix et un bouton « Ajouter au panier », entièrement réactif et avec prise en charge du mode sombre.
Composant Composants E-commerce - Documentation/Style Wiki
Un composant de commerce électronique complexe et réactif 'Documentation/Wiki' présentant des textures douces et peintes et des éléments artistiques avec une palette de couleurs bonbon/sucré (rose chewing-gum, vert menthe). Inclut la prise en charge du mode sombre et des éléments interactifs pour un site de documentation ou de base de connaissances.
Composant Composants de commerce électronique
Un composant de commerce électronique réactif avec des micro-interactions, une palette de couleurs terre, une complexité modérée et une prise en charge du mode sombre.