Retro_Vintage_Shopping_Cart_Component
Un composant de panier d’achat simple, de style rétro/vintage avec une palette de couleurs en niveaux de gris, optimisé pour les sites Web d’entreprise/d’entreprise et entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen text-gray-800 dark:text-gray-200 font-mono">
<div class="max-w-xl mx-auto border border-gray-300 dark:border-gray-700 p-6 sm:p-8 bg-white dark:bg-gray-800 shadow-lg">
<h2 class="text-2xl sm:text-3xl font-bold text-center uppercase mb-8 tracking-widest">Your Order</h2>
<div class="space-y-6 mb-8">
<!-- Cart Item 1 -->
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
<div>
<p class="text-lg font-semibold">Classic Widget</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
</div>
</div>
<p class="text-lg font-bold">$19.99</p>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/80/80?random=2" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
<div>
<p class="text-lg font-semibold">Turbo Charger</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 2</p>
</div>
</div>
<p class="text-lg font-bold">$99.98</p>
</div>
<!-- Cart Item 3 -->
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/80/80?random=3" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
<div>
<p class="text-lg font-semibold">Mega Bolt Kit</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
</div>
</div>
<p class="text-lg font-bold">$34.50</p>
</div>
</div>
<!-- Order Summary -->
<div class="border-t border-gray-300 dark:border-gray-700 pt-6 space-y-3 mb-8">
<div class="flex justify-between items-center">
<p class="text-gray-700 dark:text-gray-300">Subtotal:</p>
<p class="font-bold">$154.47</p>
</div>
<div class="flex justify-between items-center">
<p class="text-gray-700 dark:text-gray-300">Shipping:</p>
<p class="font-bold">$7.50</p>
</div>
<div class="flex justify-between items-center text-xl font-extrabold border-t border-gray-300 dark:border-gray-700 pt-3 mt-3">
<p>Total:</p>
<p>$161.97</p>
</div>
</div>
<button class="w-full py-3 px-6 bg-black text-white dark:bg-gray-100 dark:text-gray-900 uppercase tracking-widest text-lg sm:text-xl font-bold border-2 border-black dark:border-gray-100 hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200">
Checkout</button>
</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.
Memphis_Industrial_Shopping_Cart_Component
Un composant de panier d’achat simple et réactif avec une influence Memphis Design adapté aux contextes industriels/manufacturiers, avec une palette monochrome avec une seule couleur d’accent vive et une prise en charge du mode sombre.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec un design rétro/vintage, une palette de couleurs complémentaire et une prise en charge du mode sombre, conçu à l’aide de Tailwind CSS.