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.
HTML Code
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden lg:flex lg:flex-row-reverse">
<!-- Order Summary / Cart Totals -->
<div class="lg:w-1/3 p-6 sm:p-8 bg-orange-50 dark:bg-gray-700 border-b lg:border-b-0 lg:border-l border-orange-100 dark:border-gray-600">
<h2 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-6 sm:mb-8">Order Summary</h2>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<span>Subtotal</span>
<span>$385.00</span>
</div>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<span>Shipping & Handling</span>
<span>$15.00</span>
</div>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<span>Taxes (5%)</span>
<span>$19.25</span>
</div>
</div>
<div class="border-t border-orange-200 dark:border-gray-600 pt-4 flex justify-between items-center text-xl font-semibold text-orange-900 dark:text-orange-100">
<span>Order Total</span>
<span>$419.25</span>
</div>
<div class="mt-8">
<label for="promo_code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Have a promo code?</label>
<div class="flex">
<input type="text" id="promo_code" class="flex-grow p-3 border border-orange-300 dark:border-gray-600 rounded-l-md focus:ring-orange-500 focus:border-orange-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 outline-none" placeholder="Enter code">
<button class="px-4 py-3 bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-r-md transition duration-200 ease-in-out">
Apply
</button>
</div>
</div>
<button class="mt-8 w-full bg-orange-800 hover:bg-orange-900 dark:bg-orange-700 dark:hover:bg-orange-800 text-white font-bold py-3 px-6 rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
Proceed to Checkout
</button>
<p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-400">
Secure payment via SSL.
</p>
</div>
<!-- Cart Items -->
<div class="lg:w-2/3 p-6 sm:p-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 sm:mb-8">Your Shopping Cart (<span id="item_count">2</span> items)</h2>
<div class="space-y-6">
<!-- Cart Item 1 -->
<div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
<img src="https://picsum.photos/id/60/300/300" alt="Product Image" class="w-full h-full object-cover">
</div>
<div class="flex-grow mt-4 sm:mt-0">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Elegant Silk Scarf</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Burgundy Red, Size: One Size</p>
<div class="flex items-center gap-4">
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
<button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
<span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
</div>
<p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$120.00</p>
</div>
<div class="flex items-center mt-3 text-sm">
<button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
<button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
</div>
</div>
</div>
<!-- Cart Item 2 -->
<div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
<div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
<img src="https://picsum.photos/id/166/300/300" alt="Product Image" class="w-full h-full object-cover">
</div>
<div class="flex-grow mt-4 sm:mt-0">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Artisan Leather Handbag</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Autumn Brown, Size: Medium</p>
<div class="flex items-center gap-4">
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
<button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
<span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
<button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
</div>
<p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$265.00</p>
</div>
<div class="flex items-center mt-3 text-sm">
<button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
<button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
</div>
</div>
</div>
</div>
<div class="mt-8 flex flex-col sm:flex-row justify-between items-center">
<a href="#" class="text-orange-700 dark:text-orange-400 hover:underline flex items-center mb-4 sm:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
</svg>
Continue Shopping
</a>
<button class="px-6 py-3 bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
Clear Cart
</button>
</div>
</div>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat complexe et réactif avec une palette de couleurs en niveaux de gris, conçu à des fins de blog/contenu. Propose des micro-interactions à l’aide de Tailwind CSS, avec prise en charge du mode sombre et sans JavaScript.
Composant de panier d’achat
Un composant de panier d’achat simple et minimaliste utilisant Tailwind CSS, avec une palette de couleurs de tons de terre, un objectif de médias sociaux et une prise en charge du thème sombre. Il est réactif et comprend des exemples d’articles. Ce composant est conçu pour un affichage de base avec un minimum d’éléments et sans JavaScript.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec prise en charge du thème sombre, stylisé à l’aide de Tailwind CSS suivant les principes de conception matérielle avec une palette de couleurs en niveaux de gris. Utilise picsum.photos pour les images de produits.