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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row -mx-4">
<div class="md:flex-1 px-4">
<div class="h-[460px] rounded-lg bg-gray-300 dark:bg-gray-700 mb-4 animate-pulse"></div>
<div class="flex -mx-2 mb-4">
<div class="w-1/2 px-2">
<button class="w-full bg-amber-900 dark:bg-amber-700 text-white py-2 px-4 rounded-full font-bold hover:bg-amber-800 dark:hover:bg-amber-600 transform transition duration-300 hover:scale-105">Add to Cart</button>
</div>
<div class="w-1/2 px-2">
<button class="w-full bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-300 dark:hover:bg-gray-700 transform transition duration-300 hover:scale-105">Add to Wishlist</button>
</div>
</div>
</div>
<div class="md:flex-1 px-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Product Name Microinteraction</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed
ante justo. Integer eu eleifend erat. Quisque dapibus rupus augue,
a dapibus velit tincidunt et. Sed sed ante justo.
</p>
<div class="flex mb-4">
<div class="mr-4">
<span class="font-bold text-gray-700 dark:text-gray-300">Price:</span>
<span class="text-gray-600 dark:text-gray-300">$29.99</span>
</div>
<div>
<span class="font-bold text-gray-700 dark:text-gray-300">Availability:</span>
<span class="text-gray-600 dark:text-gray-300">In Stock</span>
</div>
</div>
<div class="mb-4">
<span class="font-bold text-gray-700 dark:text-gray-300">Select Color:</span>
<div class="flex items-center mt-2">
<button class="w-6 h-6 rounded-full bg-brown-700 dark:bg-brown-500 mr-2"></button>
<button class="w-6 h-6 rounded-full bg-green-700 dark:bg-green-500 mr-2"></button>
<button class="w-6 h-6 rounded-full bg-stone-700 dark:bg-stone-500"></button>
</div>
</div>
<div class="mb-4">
<span class="font-bold text-gray-700 dark:text-gray-300">Select Size:</span>
<div class="flex items-center mt-2">
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">S</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">M</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">L</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XL</button>
<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 hover:scale-105">XXL</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
Tableau de bord du commerce électronique
Un composant de tableau de bord e-commerce en mode sombre avec une mise en page simple pour la visualisation des données et les panneaux de contrôle.
Fiche produit e-commerce pour l’agriculture
Un composant de fiche produit ludique et joyeux pour les sites e-commerce agricole, avec des éléments arrondis, des tons océan/bleu, un design réactif et une prise en charge du mode sombre.