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
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.
Composant Neumorphisme E-commerce
Un composant de commerce électronique réactif conçu dans le style Neumorphism avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Composants de commerce électronique
Un composant de réservation/réservation simple et minimaliste avec un style de typographie suisse/international, avec une palette de couleurs noir et blanc avec un accent vif. Il est entièrement réactif et prend en charge le mode sombre.