Retro_Vintage_Shopping_Cart_Component
Un semplice componente del carrello della spesa in stile retrò/vintage con una combinazione di colori in scala di grigi, ottimizzato per siti Web aziendali/aziendali e completamente reattivo con supporto per la modalità scura.
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen text-gray-800 dark:text-gray-200 font-mono">
<div class="max-w-xl mx-auto border border-gray-300 dark:border-gray-700 p-6 sm:p-8 bg-white dark:bg-gray-800 shadow-lg">
<h2 class="text-2xl sm:text-3xl font-bold text-center uppercase mb-8 tracking-widest">Your Order</h2>
<div class="space-y-6 mb-8">
<!-- Cart Item 1 -->
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
<div>
<p class="text-lg font-semibold">Classic Widget</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
</div>
</div>
<p class="text-lg font-bold">$19.99</p>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/80/80?random=2" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
<div>
<p class="text-lg font-semibold">Turbo Charger</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 2</p>
</div>
</div>
<p class="text-lg font-bold">$99.98</p>
</div>
<!-- Cart Item 3 -->
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/80/80?random=3" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
<div>
<p class="text-lg font-semibold">Mega Bolt Kit</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
</div>
</div>
<p class="text-lg font-bold">$34.50</p>
</div>
</div>
<!-- Order Summary -->
<div class="border-t border-gray-300 dark:border-gray-700 pt-6 space-y-3 mb-8">
<div class="flex justify-between items-center">
<p class="text-gray-700 dark:text-gray-300">Subtotal:</p>
<p class="font-bold">$154.47</p>
</div>
<div class="flex justify-between items-center">
<p class="text-gray-700 dark:text-gray-300">Shipping:</p>
<p class="font-bold">$7.50</p>
</div>
<div class="flex justify-between items-center text-xl font-extrabold border-t border-gray-300 dark:border-gray-700 pt-3 mt-3">
<p>Total:</p>
<p>$161.97</p>
</div>
</div>
<button class="w-full py-3 px-6 bg-black text-white dark:bg-gray-100 dark:text-gray-900 uppercase tracking-widest text-lg sm:text-xl font-bold border-2 border-black dark:border-gray-100 hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200">
Checkout</button>
</div>
</div>Componenti correlati
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.
Componente del carrello della spesa
Un componente del carrello della spesa ottimizzato per le interfacce dei social media, caratterizzato da microinterazioni, colori vivaci e un layout semplice. Include il design reattivo e il supporto per la modalità scura.