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.
Codice HTML
<div class="container mx-auto p-4">
<div class="dark:bg-gray-800 bg-white shadow-md rounded-lg p-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Your Shopping Cart</h1>
<!-- Cart Item 1 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
<p class="text-gray-800 dark:text-white font-bold">$299.99</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 1
</div>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Books</p>
<p class="text-gray-800 dark:text-white font-bold">$19.50</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 2
</div>
</div>
<!-- Cart Summary -->
<div class="flex justify-between items-center mt-6">
<span class="text-xl font-semibold text-gray-800 dark:text-white">Total:</span>
<span class="text-xl font-bold text-gray-800 dark:text-white">$339.99</span>
</div>
<div class="mt-6 flex justify-end">
<button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
Checkout
</button>
</div>
</div>
</div>Componenti correlati
Componente del carrello della spesa
Componente del carrello con stile Microinterazioni, effetti reattivi e supporto per temi scuri.
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
Un componente del carrello della spesa in stile retrò/vintage con combinazione di colori in scala di grigi, complessità moderata e design reattivo con supporto per temi scuri. Progettato per siti web aziendali/aziendali che utilizzano Tailwind CSS. Niente JavaScript, solo HTML con le classi Tailwind. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.