CCHub Logo CCHub Tailwind Collection
Komponenten Wunschzettel Wunschlisten-Komponente

Wunschlisten-Komponente

Eine reaktionsschnelle Wishlist-Komponente, die in einer Retro-/Vintage-Design-Ästhetik gestaltet ist und ein monochromatisches Farbschema für E-Commerce-Zwecke verwendet.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">My Wishlist</h2>
        <p class="text-gray-600 dark:text-gray-400">Items I'd love to get someday!</p>
    </div>
    <div class="divide-y divide-gray-300 dark:divide-gray-600">
        <!-- Item 1 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 1" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Camera</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $120</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
        <!-- Item 2 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 2" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retro Turntable</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $250</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
        <!-- Item 3 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 3" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Sneakers</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $80</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
    </div>
    <div class="px-6 py-4">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Account Information</h4>
        <div class="mt-2 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10">
            <div class="ml-2">
                <p class="text-gray-900 dark:text-gray-100">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">[email protected]</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Wunschlisten-Komponente

Eine Wunschlistenkomponente im 3D-Stil für Social-Media-Schnittstellen mit interaktiven Elementen und Unterstützung für den Dunkelmodus.

Offen

Wunschlisten-Komponente

Eine Wunschlistenkomponente im Neumorphism-Stil für soziale Medien mit einem komplementären Farbschema. Es enthält ein responsives Design mit Tailwind CSS mit Unterstützung für den Dunkelmodus. Es werden nur HTML- und Tailwind-Klassen verwendet, ohne JavaScript. Die Bilder stammen von picsum.photos und die Avatare von randomuser.me.

Offen

Wunschlisten-Komponente

Eine reaktionsschnelle Wunschlistenkomponente für Beratung/Dienstleistungen mit Material Design-Prinzipien, einem Neon/Electric-Farbschema und Unterstützung des Dunkelmodus. Es zeigt Dienstleistungen mit Bildern, Titeln, Beschreibungen und einer Schaltfläche "Angebot anfordern" sowie einer Schaltfläche "Entfernen" für Artikel an.

Offen