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 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.
Composant de panier d’achat
Un composant de panier d’achat simple et réactif avec prise en charge du thème sombre, stylisé à l’aide de Tailwind CSS suivant les principes de conception matérielle avec une palette de couleurs en niveaux de gris. Utilise picsum.photos pour les images de produits.
Composant de panier d’achat
Un composant de panier d’achat optimisé pour les interfaces de médias sociaux, avec des micro-interactions, des couleurs vives et une mise en page simple. Comprend la conception réactive et la prise en charge du mode sombre.