Componente del carrello della spesa
Un semplice componente del carrello della spesa in modalità scura con un design reattivo, con elenchi di prodotti, quantità e un totale. Utilizza una combinazione di colori triadici con uno sfondo scuro. È progettato per il consumo di contenuti.
Codice HTML
<div class="dark:bg-gray-900 dark:text-white min-h-screen p-4">
<h1 class="text-2xl font-bold mb-6 text-center text-blue-400">Your Shopping Cart</h1>
<div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-5">
<!-- Product Item 1 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/237/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Awesome Gadget</h3>
<p class="text-gray-400">Quantity: 1</p>
</div>
<span class="text-lg font-bold text-red-400">$29.99</span>
</div>
<!-- Product Item 2 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/238/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Super Item</h3>
<p class="text-gray-400">Quantity: 2</p>
</div>
<span class="text-lg font-bold text-red-400">$19.50</span>
</div>
<!-- Product Item 3 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/239/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Mega Product</h3>
<p class="text-gray-400">Quantity: 1</p>
</div>
<span class="text-lg font-bold text-red-400">$49.00</span>
</div>
<!-- Total -->
<div class="border-t border-gray-700 pt-4 flex justify-between items-center">
<span class="text-xl font-bold text-blue-400">Total:</span>
<span class="text-xl font-bold text-red-400">$98.49</span>
</div>
<button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">
Proceed to Checkout
</button>
</div>
<!-- Responsive adjustments -->
<style>
@media (max-width: 640px) {
.max-w-md {
margin-left: 1rem;
margin-right: 1rem;
}
}
</style>
</div>Componenti correlati
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.
Componente del carrello della spesa aziendale retrò
Un componente del carrello della spesa complesso e reattivo con uno stile di design retrò/vintage, incentrato sull'estetica degli anni '80/'90 e sui toni del blu aziendale, adatto per applicazioni manifatturiere/industriali. Include il supporto per la modalità oscura ed elementi interattivi.
Componente del carrello della spesa
Un componente del carrello della spesa reattivo progettato per una piattaforma di e-commerce, caratterizzato da uno stile di design 3D e una combinazione di colori pastello. È dotato di molteplici elementi interattivi come elenchi di prodotti, quantità e un pulsante di pagamento, che supporta il tema scuro.