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 réactif avec des effets de néon/lueur et une palette de couleurs bleues d’entreprise, prenant en charge le mode sombre. Comprend des listes de produits, des ajustements de quantité et un résumé complet.
Composant de panier d’achat
Composant de panier d’achat avec un design brutaliste, des effets réactifs et la prise en charge du thème sombre.
Composant de panier d’achat
Un composant de panier d’achat conçu avec le skeuomorphisme. Il présente des éléments numériques qui imitent leurs homologues du monde réel, une prise en charge réactive complète et une compatibilité avec les thèmes sombres.