Componente del carrello della spesa
Un componente del carrello della spesa con design Skeuomorphism, effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/80" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300">Quantity: 1</p>
<p class="text-gray-800 dark:text-white">$19.99</p>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
</div>
<!-- Cart Item -->
<div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/81" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Another Product</h2>
<p class="text-gray-600 dark:text-gray-300">Quantity: 2</p>
<p class="text-gray-800 dark:text-white">$29.50</p>
</div>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
</div>
</div>
<div class="mt-6 flex justify-end items-center">
<div class="text-xl font-bold text-gray-900 dark:text-white mr-4">Total: $69.00</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg shadow-xl">Checkout</button>
</div>
</div>Componenti correlati
Carrello della spesa neumorfico
Un componente del carrello della spesa neumorfico che utilizza una combinazione di colori triadica. Ha una complessità moderata, progettato per siti Web aziendali/aziendali. Il componente è reattivo e include il supporto per la modalità oscura utilizzando il prefisso dark: di Tailwind. Include segnaposto per gli articoli con quantità e prezzo, un subtotale e un pulsante di pagamento. Utilizza picsum.photos per le immagini dei prodotti.
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.
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.