CCHub Logo CCHub Tailwind Collection
Komponenten Einkaufswagen Komponente des Einkaufswagens

Komponente des Einkaufswagens

Eine reaktionsschnelle Warenkorbkomponente im Brutalismus-Stil mit hohem Kontrast und ungewöhnlichen Layouts. Es unterstützt dunkles Theme mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex justify-between items-center mt-4">
            <h4 class="text-xl font-bold text-gray-800 dark:text-white">Total:</h4>
            <p class="text-xl font-bold text-gray-800 dark:text-white">$79.98</p>
        </div>
        <button class="w-full mt-4 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition duration-200">Checkout</button>
    </div>
    <div class="flex items-center justify-center mt-4">
        <p class="text-gray-600 dark:text-gray-300 text-sm">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
    </div>
</div>

Verwandte Komponenten

Komponente des Einkaufswagens

Eine Warenkorbkomponente im Retro-/Vintage-Stil mit monochromatischem Farbschema, moderater Komplexität, responsivem Design und Unterstützung für den Dunkelmodus. Geeignet für Business-/Unternehmenswebsites.

Offen

Komponente des Einkaufswagens

Eine komplexe, reaktionsschnelle Warenkorbkomponente mit Graustufen-Farbschema, die für Blog-/Content-Zwecke entwickelt wurde. Bietet Mikrointeraktionen mit Tailwind CSS, mit Unterstützung für den Dunkelmodus und ohne JavaScript.

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