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 complexe, propre et fiable conçu pour les produits de mode et de beauté, avec des couleurs d’automne riches, une réactivité totale et une prise en charge du mode sombre.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec un design Neumorphism et une palette de couleurs complémentaire pour la prise en charge du thème sombre.
Composant de panier d’achat
Un composant de panier d’achat de style Neumorphic pour le commerce électronique, doté d’une palette de couleurs monochromatiques, d’éléments interactifs riches et d’une prise en charge du thème sombre à l’aide de Tailwind CSS.