Componente del carrello della spesa
Componente del carrello della spesa con design Brutalism, effetti reattivi e supporto per temi scuri.
Codice HTML
<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>Componenti correlati
Componente del carrello della spesa
Un componente del carrello della spesa semplice e reattivo con supporto per il tema scuro, con uno stile che utilizza Tailwind CSS seguendo i principi del Material Design con una combinazione di colori in scala di grigi. Utilizza picsum.photos per le immagini dei prodotti.
Componente del carrello della spesa
Un componente del carrello della spesa progettato con effetti Glassmorphism, che utilizza una combinazione di colori complementari e ottimizzato per la modalità scura. Perfetto per l'utilizzo del portfolio, la presentazione di lavori o prodotti.
Componente del carrello della spesa
Un componente del carrello della spesa progettato in 3D con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.