Composant de panier d’achat
Composant de panier d’achat avec style Microinteractions, effets réactifs et prise en charge du thème sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
<div class="md:flex">
<div class="w-full p-4">
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Shopping Cart</span>
<span class="text-gray-600 dark:text-gray-300">3 items</span>
</div>
<hr class="mt-4">
<div class="mt-8">
<div class="flex items-center mb-5">
<div class="w-20 h-20 overflow-hidden rounded-lg">
<img src="https://picsum.photos/id/1018/80/80" alt="product image" class="object-cover w-full h-full">
</div>
<div class="flex-grow ml-4">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: M, Color: Red</p>
<p class="text-gray-800 dark:text-gray-200 mt-1">$25.99</p>
</div>
<div class="flex flex-col items-center">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
</div>
</div>
<div class="flex items-center mb-5">
<div class="w-20 h-20 overflow-hidden rounded-lg">
<img src="https://picsum.photos/id/1015/80/80" alt="product image" class="object-cover w-full h-full">
</div>
<div class="flex-grow ml-4">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: S, Color: Blue</p>
<p class="text-gray-800 dark:text-gray-200 mt-1">$15.50</p>
</div>
<div class="flex flex-col items-center">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
</div>
</div>
<div class="flex items-center">
<div class="w-20 h-20 overflow-hidden rounded-lg">
<img src="https://picsum.photos/id/1019/80/80" alt="product image" class="object-cover w-full h-full">
</div>
<div class="flex-grow ml-4">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 3</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">One Size, Color: Green</p>
<p class="text-gray-800 dark:text-gray-200 mt-1">$30.00</p>
</div>
<div class="flex flex-col items-center">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
</div>
</div>
</div>
<hr class="mt-8">
<div class="mt-4 flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Total:</span>
<span class="text-gray-900 dark:text-gray-100 text-lg font-semibold">$71.49</span>
</div>
<button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:bg-blue-600 transition ease-in-out duration-150">
Checkout
</button>
</div>
</div>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat simple et réactif imitant le design du monde réel avec des couleurs vives, adapté au commerce électronique.
Composant de panier d’achat d’entreprise rétro
Un composant de panier d’achat complexe et réactif avec un style de design rétro/vintage, axé sur l’esthétique des années 80/90 et les tons bleus d’entreprise, adapté aux applications manufacturières/industrielles. Comprend la prise en charge du mode sombre et des éléments interactifs.
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.