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 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 réactif avec un design skeuomorphe, avec la prise en charge du thème sombre et des images d’espace réservé aléatoires.
Composant de panier d’achat
Un composant de panier d’achat réactif conçu pour une plateforme de commerce électronique, avec un style de conception 3D et une palette de couleurs pastel. Il est équipé de plusieurs éléments interactifs tels que des listes de produits, des quantités et un bouton de paiement, prenant en charge le thème sombre.