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
OrganiqueNatureSportsShoppingCartComposant
Un composant de panier d’achat simple et réactif avec un design inspiré de l’agriculture et de la nature, une palette de couleurs triadique, adapté aux applications de sport et de fitness, avec prise en charge du mode sombre.
Composant de panier d’achat
Un composant de panier d’achat conçu avec des effets de Glassmorphism, utilisant une palette de couleurs complémentaires et optimisé pour le mode sombre. Parfait pour une utilisation en portefeuille, pour présenter des travaux ou des produits.
Composant de panier d’épicerie - Inspiré de la nature
Un composant de chariot d’épicerie complexe, inspiré de la nature, pour les applications de sport/fitness, avec des lignes fluides, une palette de couleurs complémentaires, une réactivité et une prise en charge du mode sombre.