CCHub Logo CCHub Tailwind Collection
Komponenten Einkaufswagen Komponente des Einkaufswagens

Komponente des Einkaufswagens

Eine Warenkorbkomponente, die mit Glassmorphism-Effekten entwickelt wurde, ein komplementäres Farbschema verwendet und für den Dunkelmodus optimiert ist. Perfekt für die Nutzung von Portfolios, die Präsentation von Arbeiten oder Produkten.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
        <div class="mt-4">
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
            </div>
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
            </div>
        </div>
        <div class="flex items-center justify-between border-t pt-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
            <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
    </div>
</div>

Verwandte Komponenten

Memphis_Industrial_Shopping_Cart_Component

Eine einfache, reaktionsschnelle Warenkorbkomponente mit Memphis Design-Einflüssen, die auf Industrie-/Fertigungskontexte zugeschnitten ist, mit einer monochromen Palette mit einer einzigen hellen Akzentfarbe und Unterstützung des Dunkelmodus.

Offen

Komponente des Einkaufswagens

Warenkorbkomponente mit 3D-Design, Erdtönen und komplexen interaktiven Elementen. Es ist für eine Blog-/Content-Website mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS konzipiert.

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