Composant de panier d’achat
Un composant de panier d’achat de style rétro/vintage avec une palette de couleurs en niveaux de gris, une complexité modérée et un design réactif avec prise en charge du thème sombre. Conçu pour les sites Web d’entreprise/d’entreprise utilisant Tailwind CSS. Pas de JavaScript, seulement du HTML avec des classes Tailwind. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<div class="antialiased dark:bg-gray-900 dark:text-gray-200">
<div class="h-full bg-gray-100 dark:bg-gray-800 p-8">
<div class="mx-auto max-w-3xl">
<header class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Your Cart</h1>
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Continue Shopping</a>
</header>
<div class="mt-8">
<ul class="space-y-4">
<li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
<img src="https://picsum.photos/seed/product1/80/80" alt="Nike Air Force 1" class="h-20 w-20 rounded-lg object-cover mr-4">
<div class="flex-grow">
<h3 class="text-base font-semibold text-gray-900 dark:text-white">Nike Air Force 1</h3>
<p class="text-sm text-gray-500 dark:text-gray-300">Size: 10</p>
<p class="text-sm text-gray-500 dark:text-gray-300">Color: White</p>
<div class="mt-2 flex items-center justify-between">
<span class="text-base font-bold text-gray-900 dark:text-white">$120.00</span>
<div class="flex items-center">
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
<input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
</div>
</div>
</div>
<button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</button>
</li>
<li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
<img src="https://picsum.photos/seed/product2/80/80" alt="Apple Watch Series 7" class="h-20 w-20 rounded-lg object-cover mr-4">
<div class="flex-grow">
<h3 class="text-base font-semibold text-gray-900 dark:text-white">Apple Watch Series 7</h3>
<p class="text-sm text-gray-500 dark:text-gray-300">Color: Space Gray</p>
<p class="text-sm text-gray-500 dark:text-gray-300">Band: Solo Loop</p>
<div class="mt-2 flex items-center justify-between">
<span class="text-base font-bold text-gray-900 dark:text-white">$399.00</span>
<div class="flex items-center">
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
<input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
</div>
</div>
</div>
<button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</button>
</li>
</ul>
</div>
<div class="mt-8 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
<div class="flex items-center justify-between">
<p class="text-base font-semibold text-gray-900 dark:text-white">Subtotal</p>
<p class="text-base font-semibold text-gray-900 dark:text-white">$519.00</p>
</div>
<div class="mt-2 flex items-center justify-between">
<p class="text-base font-semibold text-gray-900 dark:text-white">Shipping</p>
<p class="text-base font-semibold text-gray-900 dark:text-white">Free</p>
</div>
<div class="mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-600">
<p class="text-xl font-bold text-gray-900 dark:text-white">Total</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">$519.00</p>
</div>
</div>
<div class="mt-8 flex justify-end">
<button type="button" class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">Proceed to Checkout</button>
</div>
</div>
</div>
</div>Composants associés
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.
Composant de panier d’achat
Un composant de panier d’achat avec un design Skeuomorphism, des effets réactifs et la prise en charge du thème sombre.
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.