CCHub Logo CCHub Tailwind Collection
Komponenten Einkaufswagen Komponente des Einkaufswagens

Komponente des Einkaufswagens

Eine 3D-designte Warenkorbkomponente mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Neumorpher Einkaufswagen

Eine neumorphe Warenkorbkomponente mit einem triadischen Farbschema. Es hat eine moderate Komplexität und wurde für Geschäfts-/Unternehmenswebsites entwickelt. Die Komponente ist reaktionsschnell und bietet Unterstützung für den Dunkelmodus mit dem Präfix dark: von Tailwind. Enthält Platzhalter für Artikel mit Menge und Preis, eine Zwischensumme und eine Schaltfläche zum Auschecken. Verwendet picsum.photos für Produktbilder.

Offen

Komponente des Einkaufswagens

Eine komplexe, reaktionsschnelle Warenkorbkomponente mit Mikrointeraktionen und analogen Farben für soziale Medien mit Unterstützung des Dunkelmodus unter Verwendung von Tailwind CSS.

Offen

Komponente des Einkaufswagens

Eine einfache, reaktionsschnelle Warenkorbkomponente, die reales Design mit leuchtenden Farben nachahmt und für den E-Commerce geeignet ist.

Offen