Componente del carrello della spesa
Componente del carrello con stile Microinterazioni, effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-8">
<div class="max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
<div class="md:flex">
<div class="w-full p-4">
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Shopping Cart</span>
<span class="text-gray-600 dark:text-gray-300">3 items</span>
</div>
<hr class="mt-4">
<div class="mt-8">
<div class="flex items-center mb-5">
<div class="w-20 h-20 overflow-hidden rounded-lg">
<img src="https://picsum.photos/id/1018/80/80" alt="product image" class="object-cover w-full h-full">
</div>
<div class="flex-grow ml-4">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: M, Color: Red</p>
<p class="text-gray-800 dark:text-gray-200 mt-1">$25.99</p>
</div>
<div class="flex flex-col items-center">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
</div>
</div>
<div class="flex items-center mb-5">
<div class="w-20 h-20 overflow-hidden rounded-lg">
<img src="https://picsum.photos/id/1015/80/80" alt="product image" class="object-cover w-full h-full">
</div>
<div class="flex-grow ml-4">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Size: S, Color: Blue</p>
<p class="text-gray-800 dark:text-gray-200 mt-1">$15.50</p>
</div>
<div class="flex flex-col items-center">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
</div>
</div>
<div class="flex items-center">
<div class="w-20 h-20 overflow-hidden rounded-lg">
<img src="https://picsum.photos/id/1019/80/80" alt="product image" class="object-cover w-full h-full">
</div>
<div class="flex-grow ml-4">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 3</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">One Size, Color: Green</p>
<p class="text-gray-800 dark:text-gray-200 mt-1">$30.00</p>
</div>
<div class="flex flex-col items-center">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
<span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
<button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
<svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</button>
</div>
</div>
</div>
<hr class="mt-8">
<div class="mt-4 flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Total:</span>
<span class="text-gray-900 dark:text-gray-100 text-lg font-semibold">$71.49</span>
</div>
<button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:bg-blue-600 transition ease-in-out duration-150">
Checkout
</button>
</div>
</div>
</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 reattivo con un design scheumorfico, con supporto per temi scuri e immagini segnaposto casuali.