Componenti Carrello Componente del carrello della spesa

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.

Anteprima

Codice HTML

<div class='bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md mx-auto transform transition-all duration-300 hover:scale-105'>
    <h2 class='text-xl font-semibold text-gray-800 dark:text-white'>Shopping Cart</h2>
    <ul class='mt-4 space-y-4'>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Product Name</h3>
                <p class='text-gray-600 dark:text-gray-300'>$19.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Another Product</h3>
                <p class='text-gray-600 dark:text-gray-300'>$29.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
    </ul>
    <div class='mt-6 flex justify-between items-center'>
        <span class='text-gray-800 dark:text-white text-lg'>Total:</span>
        <span class='text-gray-800 dark:text-white text-lg font-semibold'>$49.98</span>
    </div>
    <button class='mt-5 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition'>Proceed to Checkout</button>
</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.

Aperto