Componenti Carrello Componente del carrello della spesa

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.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="flex justify-between font-bold text-lg mt-5">
        <span class="text-gray-800 dark:text-white">Total:</span>
        <span class="text-gray-800 dark:text-white">$49.98</span>
    </div>
    <button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>

Componenti correlati

Componente del carrello della spesa

Un componente del carrello della spesa reattivo progettato con uno stile brutalista, caratterizzato da un contrasto elevato e layout insoliti. Supporta il tema scuro con Tailwind CSS.

Aperto

Componente del carrello della spesa

Un componente del carrello della spesa a tema retrò/vintage con combinazione di colori monocromatici, complessità moderata, design reattivo e supporto per la modalità scura. Adatto per siti web aziendali/aziendali.

Aperto

Componente del carrello della spesa

Un componente del carrello della spesa brutalista con supporto per la modalità oscura e design reattivo.

Aperto