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.
HTML Code
<div class="container mx-auto p-8 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono">
<h1 class="text-5xl font-bold mb-8 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Your Cart</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">Item Name</h2>
<span class="text-xl font-bold">$99.99</span>
</div>
<p class="mb-4">Brief description of the item goes here. Brutalist aesthetic with high contrast and strong lines.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
<span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">1</span>
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
</div>
<button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">Another Item</h2>
<span class="text-xl font-bold">$199.99</span>
</div>
<p class="mb-4">Another description for another item. Keeping with the raw and bold design principles.</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
<span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">2</span>
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
</div>
<button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
</div>
</div>
</div>
<div class="mt-8 border-t-4 border-gray-900 dark:border-gray-100 pt-8 flex justify-between items-center">
<h2 class="text-3xl font-bold">Total</h2>
<span class="text-3xl font-bold">$299.98</span>
</div>
<div class="mt-8 text-right">
<button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-2xl font-bold px-8 py-4 border-4 border-gray-900 dark:border-gray-100">Checkout</button>
</div>
</div>Composants associés
Composant de panier d’achat
Un composant de panier d’achat réactif conçu dans le style Neumorphism à l’aide de Tailwind CSS, adapté aux interfaces de médias sociaux avec prise en charge du thème sombre.
Retro_Vintage_Shopping_Cart_Component
Un composant de panier d’achat réactif à l’esthétique rétro/vintage, utilisant des tons sépia/bruns, adapté aux vitrines de produits. Inclut la prise en charge du mode sombre.
Composant de panier d’achat
Un composant de panier d’achat complexe, propre et fiable conçu pour les produits de mode et de beauté, avec des couleurs d’automne riches, une réactivité totale et une prise en charge du mode sombre.