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 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.
Composant de panier d’achat
Un composant de panier d’achat réactif avec un design skeuomorphe, avec la prise en charge du thème sombre et des images d’espace réservé aléatoires.
Composant de panier d’achat
Un composant de panier d’achat simple et minimaliste utilisant Tailwind CSS, avec une palette de couleurs de tons de terre, un objectif de médias sociaux et une prise en charge du thème sombre. Il est réactif et comprend des exemples d’articles. Ce composant est conçu pour un affichage de base avec un minimum d’éléments et sans JavaScript.