Componente del carrello della spesa
Un componente del carrello della spesa progettato con scheumorfismo. Presenta elementi digitali che imitano le loro controparti del mondo reale, supporto reattivo completo e compatibilità con i temi scuri.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="flex justify-between font-bold text-lg mt-5">
<span class="text-gray-800 dark:text-white">Total:</span>
<span class="text-gray-800 dark:text-white">$49.98</span>
</div>
<button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>Componenti correlati
Componente del carrello della spesa
Un componente del carrello della spesa in stile neumorfico per l'e-commerce, con una combinazione di colori monocromatica, ricchi elementi interattivi e supporto per temi scuri utilizzando Tailwind CSS.
Carrello della spesa retrò/vintage
Componente del carrello della spesa con stile retrò / vintage, combinazione di colori pastello e complessità semplice. Design reattivo con supporto per temi scuri utilizzando Tailwind CSS.
OrganicoNaturaSportShoppingCarrelloComponente
Un componente del carrello della spesa semplice e reattivo con un design organico/ispirato alla natura, combinazione di colori triadico, adatto per applicazioni sportive e di fitness, con supporto per la modalità scura.