Componente del carrello della spesa
Componente del carrello della spesa con Material Design, combinazione di colori monocromatici e complessità moderata per l'e-commerce. Design reattivo con supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="container mx-auto p-4 bg-gray-lightest dark:bg-gray-dark">
<h1 class="text-2xl font-bold mb-4 text-gray-darkest dark:text-gray-lightest">Shopping Cart</h1>
<div class="shadow-md rounded-lg overflow-hidden">
<!-- Cart Item -->
<div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 1</h2>
<p class="text-gray-dark dark:text-gray-light">Price: $19.99</p>
<div class="flex items-center mt-2">
<label for="quantity1" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
<input type="number" id="quantity1" name="quantity1" value="1" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
</div>
</div>
<button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item -->
<div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 2</h2>
<p class="text-gray-dark dark:text-gray-light">Price: $29.99</p>
<div class="flex items-center mt-2">
<label for="quantity2" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
<input type="number" id="quantity2" name="quantity2" value="2" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
</div>
</div>
<button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Total -->
<div class="flex justify-between items-center p-4 bg-white dark:bg-gray-darker">
<span class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Total:</span>
<span class="text-lg font-bold text-gray-darkest dark:text-gray-lightest">$79.97</span>
</div>
</div>
<!-- Checkout Button -->
<div class="mt-4 text-right">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-800 dark:hover:bg-blue-900">
Checkout
</button>
</div>
</div>Componenti correlati
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.
Componente del carrello 3D
Un componente del carrello della spesa di grande impatto visivo con elementi di design 3D che creano profondità e coinvolgimento. Utilizza una combinazione di colori triadica (blu primario, rosso vivido e giallo ambra) per l'interesse visivo. Questa complessa interfaccia include elenchi di prodotti con immagini, controlli della quantità, riepiloghi dei prezzi ed effetti al passaggio del mouse che simulano il movimento 3D. Completamente reattivo con supporto per temi scuri. Il componente è progettato per un ambiente di contenuti/blog in cui i lettori possono acquistare prodotti consigliati mentre consumano contenuti.
Componente del carrello della spesa
Componente del carrello della spesa con design 3D, toni della terra ed elementi interattivi complessi. È progettato per un blog/sito Web di contenuti, con design reattivo e supporto per temi scuri, utilizzando Tailwind CSS.