Komponenten Einkaufswagen Komponente des Einkaufswagens

Komponente des Einkaufswagens

Eine responsive Warenkorbkomponente, die im Neumorphism-Stil mit Tailwind CSS entworfen wurde und für Social-Media-Schnittstellen mit Unterstützung für dunkle Themen geeignet ist.

Vorschau

HTML-Code

<div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Shopping Cart</h2>
        <div class="space-y-4">
            <!-- Cart Item 1 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=1" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">$19.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 2 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=2" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 3 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=3" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Total: $89.97</h3>
            <button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Checkout</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente des Einkaufswagens

Eine responsive Warenkorbkomponente mit einem skeuomorphen Design, mit Unterstützung für dunkle Themen und zufälligen Platzhalterbildern.

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 mit Unterstützung für dunkle Themen, die mit Tailwind CSS nach den Prinzipien des Material Designs mit einem Graustufen-Farbschema gestaltet wurde. Verwendet picsum.photos für Produktbilder.

Offen