CCHub Logo CCHub Tailwind Collection
Komponenten Wunschzettel Wunschlisten-Komponente

Wunschlisten-Komponente

Eine Wunschlistenkomponente mit 3D-Designstil, Pastellfarbschema und responsivem Design für Unternehmenswebsites, die den Dunkelmodus unterstützen.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">My Wishlist</h2>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist1/100/100" alt="Wishlist Item 1" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 1</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 1</p>
                <span class="text-purple-600 dark:text-purple-400">$29.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist2/100/100" alt="Wishlist Item 2" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 2</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 2</p>
                <span class="text-purple-600 dark:text-purple-400">$39.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist3/100/100" alt="Wishlist Item 3" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 3</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 3</p>
                <span class="text-purple-600 dark:text-purple-400">$49.99</span>
            </div>
        </li>
    </ul>
    <div class="mt-4 flex justify-between items-center">
        <span class="text-gray-700 dark:text-gray-300">Total:</span>
        <span class="text-purple-600 dark:text-purple-400 font-bold">$119.97</span>
    </div>
    <button class="mt-4 w-full bg-purple-500 dark:bg-purple-600 text-white font-semibold py-2 rounded hover:bg-purple-600 dark:hover:bg-purple-700 transition duration-200">Checkout</button>
</div>

Verwandte Komponenten

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 minimalistische Wunschlistenkomponente mit Platzhalterbildern und einem dunklen Thema.

Offen

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.

Offen