CCHub Logo CCHub Tailwind Collection
Komponenten Einkaufswagen Komponente des Einkaufswagens

Komponente des Einkaufswagens

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

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Shopping Cart</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
    </ul>
    <div class="mt-6">
        <button class="w-full py-3 text-lg font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
            Checkout
        </button>
    </div>
</div>

Verwandte Komponenten

Komponente des Einkaufswagens

Eine einfache Warenkorbkomponente im Dunkelmodus mit einem responsiven Design mit Produktlisten, Mengen und einer Gesamtsumme. Es verwendet ein triadisches Farbschema mit dunklem Hintergrund. Es ist für den Konsum von Inhalten konzipiert.

Offen

Komponente des Einkaufswagens

Eine einfache, reaktionsschnelle Warenkorbkomponente mit Retro-/Vintage-Design, komplementärem Farbschema und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.

Offen

Komponente des Einkaufswagens

Eine Warenkorbkomponente im Neumorphic-Stil für den E-Commerce mit einem monochromatischen Farbschema, reichhaltigen interaktiven Elementen und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen