Componente del carrello della spesa
Un componente del carrello della spesa semplice e minimalista che utilizza Tailwind CSS, con combinazione di colori dei toni della terra, scopo dei social media e supporto per temi scuri. È reattivo e include elementi di esempio. Questo componente è progettato per la visualizzazione di base con elementi minimi e senza JavaScript.
Codice HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h1>
<div class="space-y-4">
<!-- Cart Item 1 -->
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
<img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
<p class="text-gray-800 dark:text-white font-bold">$19.99</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
<img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
<p class="text-gray-800 dark:text-white font-bold">$39.98</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
<!-- Cart Item 3 -->
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 pb-4">
<img src="https://picsum.photos/seed/item3/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded">
<div class="ml-4 flex-grow">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 3</h2>
<p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
<p class="text-gray-800 dark:text-white font-bold">$9.50</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
</div>
</div>
<!-- Cart Summary -->
<div class="mt-6 flex justify-between items-center">
<span class="text-xl font-bold text-gray-800 dark:text-white">Total:</span>
<span class="text-xl font-bold text-gray-800 dark:text-white">$69.47</span>
</div>
<button class="mt-6 w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded dark:bg-green-700 dark:hover:bg-green-800">
Checkout
</button>
</div>Componenti correlati
Componente del carrello della spesa
Un componente reattivo del carrello della spesa progettato in stile neumorfismo utilizzando Tailwind CSS, adatto per interfacce di social media con supporto per temi scuri.
Componente del carrello della spesa
Un componente del carrello della spesa reattivo con un design scheumorfico, con supporto per temi scuri e immagini segnaposto casuali.
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.