Componente RetroShoppingcart
Un componente del carrello della spesa reattivo con un'estetica retrò/vintage, combinazione di colori triadici e supporto per la modalità scura, adatto per un portfolio.
Codice HTML
<div class="font-sans antialiased text-[#222831] bg-[#FDF0D5] dark:bg-[#001D3D] dark:text-[#E0FBFC] min-h-screen p-4 sm:p-6 lg:p-8">
<div class="max-w-4xl mx-auto bg-[#F6AE2D] dark:bg-[#003566] p-6 sm:p-8 rounded-lg shadow-xl border-4 border-[#00A1AB] dark:border-[#FFC300] transform transition duration-300 hover:scale-[1.01] overflow-hidden">
<h1 class="text-3xl sm:text-4xl font-extrabold text-[#001D3D] dark:text-[#E0FBFC] mb-6 sm:mb-8 text-center uppercase tracking-wide border-b-4 border-[#001D3D] dark:border-[#FFC300] pb-2">
Your Groovy Cart
</h1>
<div class="space-y-6 mb-8">
<!-- Cart Item 1 -->
<div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
<img src="https://picsum.photos/100/100?random=1" alt="Vintage Gadget" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
<div class="flex-1 text-center sm:text-left">
<h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Retro Boombox</h2>
<p class="text-sm text-[#393E46] dark:text-gray-300">Classic sound, modern vibe.</p>
<div class="flex items-center justify-center sm:justify-start mt-2">
<p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$129.99</p>
<div class="flex items-center space-x-2">
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
<span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">1</span>
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
</div>
</div>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
<!-- Cart Item 2 -->
<div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
<img src="https://picsum.photos/100/100?random=2" alt="Vintage Toy" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
<div class="flex-1 text-center sm:text-left">
<h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Pixelated Game Cartridge</h2>
<p class="text-sm text-[#393E46] dark:text-gray-300">Unlock endless 8-bit adventures.</p>
<div class="flex items-center justify-center sm:justify-start mt-2">
<p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$39.50</p>
<div class="flex items-center space-x-2">
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
<span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">2</span>
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
</div>
</div>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
<!-- Cart Summary -->
<div class="bg-[#FDF0D5] dark:bg-[#001D3D] p-6 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] mb-8">
<h2 class="text-2xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-4 text-center border-b-2 border-[#F6AE2D] dark:border-[#FFC300] pb-2">Cart Totals</h2>
<div class="flex justify-between items-center text-lg mb-2">
<span class="text-[#393E46] dark:text-gray-300">Subtotal:</span>
<span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="subtotal">$208.99</span>
</div>
<div class="flex justify-between items-center text-lg mb-4">
<span class="text-[#393E46] dark:text-gray-300">Shipping:</span>
<span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="shipping">$7.50</span>
</div>
<div class="flex justify-between items-center text-xl font-extrabold border-t-2 border-[#F6AE2D] dark:border-[#FFC300] pt-4">
<span class="text-[#001D3D] dark:text-[#E0FBFC]">Total:</span>
<span class="text-[#00A1AB] dark:text-[#FFC300]" id="total">$216.49</span>
</div>
</div>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
Continue Shopping
</button>
<button class="bg-[#00A1AB] dark:bg-[#2A9D8F] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#007D88] dark:hover:bg-[#3DDC84] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
Proceed to Checkout
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
<p class="text-center text-xs mt-8 text-[#393E46] dark:text-gray-400">
Embrace the past, shop the future.
</p>
</div>
</div>Componenti correlati
Componente del carrello della spesa
Un componente del carrello della spesa progettato in 3D con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
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.
Industrial_Travel_Shopping_Cart
Un componente del carrello della spesa complesso e reattivo con un'estetica di design industriale e una combinazione di colori verde foresta, adatto per siti Web di prenotazione di viaggi e turismo. Include il supporto per la modalità oscura, elementi di interfaccia avanzati e HTML semantico.