Composant de panier d’achat
Composant de panier d’achat avec conception matérielle, palette de couleurs monochromatique et complexité modérée pour le commerce électronique. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="container mx-auto p-4 bg-gray-lightest dark:bg-gray-dark">
<h1 class="text-2xl font-bold mb-4 text-gray-darkest dark:text-gray-lightest">Shopping Cart</h1>
<div class="shadow-md rounded-lg overflow-hidden">
<!-- Cart Item -->
<div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 1</h2>
<p class="text-gray-dark dark:text-gray-light">Price: $19.99</p>
<div class="flex items-center mt-2">
<label for="quantity1" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
<input type="number" id="quantity1" name="quantity1" value="1" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
</div>
</div>
<button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item -->
<div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 2</h2>
<p class="text-gray-dark dark:text-gray-light">Price: $29.99</p>
<div class="flex items-center mt-2">
<label for="quantity2" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
<input type="number" id="quantity2" name="quantity2" value="2" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
</div>
</div>
<button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Total -->
<div class="flex justify-between items-center p-4 bg-white dark:bg-gray-darker">
<span class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Total:</span>
<span class="text-lg font-bold text-gray-darkest dark:text-gray-lightest">$79.97</span>
</div>
</div>
<!-- Checkout Button -->
<div class="mt-4 text-right">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-800 dark:hover:bg-blue-900">
Checkout
</button>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat avec un design Skeuomorphism, des effets réactifs et la prise en charge du thème sombre.
Composant de panier d’achat
Un composant de panier d’achat complexe et réactif avec des micro-interactions et des couleurs analogues, pour les médias sociaux, avec prise en charge du mode sombre à l’aide de Tailwind CSS.
Chariot de supermarché Neumorphic
Composant de panier d’achat Neumorphic utilisant une combinaison de couleurs triadique. Il a une complexité modérée, conçu pour les sites Web d’entreprise. Le composant est réactif et inclut la prise en charge du mode sombre à l’aide du préfixe dark : de Tailwind. Comprend des espaces réservés pour les articles avec la quantité et le prix, un sous-total et un bouton de paiement. Utilise picsum.photos pour les images de produits.