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 Warenkorbkomponente mit Skeuomorphismus-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Komponente des Einkaufswagens

Eine reaktionsschnelle Warenkorbkomponente, die für eine E-Commerce-Plattform entwickelt wurde und sich durch einen 3D-Designstil und ein Pastellfarbschema auszeichnet. Es ist mit mehreren interaktiven Elementen wie Produktlisten, Mengen und einer Checkout-Schaltfläche ausgestattet, die ein dunkles Thema unterstützen.

Offen

Komponente des Einkaufswagens

Eine Warenkorbkomponente, die mit Skeuomorphismus entworfen wurde. Es verfügt über digitale Elemente, die ihre realen Gegenstücke nachahmen, volle reaktionsschnelle Unterstützung und Kompatibilität mit dunklen Themen.

Offen