CCHub Logo CCHub Tailwind Collection
Komponenten In den Warenkorb Button Komponente der Schaltfläche "In den Warenkorb"

Komponente der Schaltfläche "In den Warenkorb"

Eine reaktionsschnelle Schaltfläche "In den Warenkorb", die im dunklen Modus mit Tailwind CSS entworfen wurde, mit Hover-Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="flex flex-col items-center bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-auto rounded-lg mb-4" />
        <h2 class="text-lg font-semibold mb-2">Product Name</h2>
        <p class="text-gray-400 mb-4">Short description of the product goes here.</p>
        <div class="flex items-center justify-between w-full">
            <span class="text-xl font-bold">$19.99</span>
            <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
                Add to Cart
            </button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente der Schaltfläche "In den Warenkorb"

Ein komplexer "In den Warenkorb"-Button mit Retro-/Vintage-Ästhetik und komplementärem Farbschema, der sich für eine professionelle Unternehmenswebsite eignet. Diese Komponente unterstützt den Dunkelmodus und ist reaktionsschnell, wobei Tailwind CSS für das Styling verwendet wird.

Offen

Komponente der Schaltfläche "In den Warenkorb"

Eine reaktionsschnelle "In den Warenkorb"-Button-Komponente für Reise-/Tourismus-Websites, inspiriert vom Papier-/Printdesign mit warmen Sonnenuntergangstönen. Enthält Unterstützung für den Dunkelmodus und einen subtilen interaktiven Effekt.

Offen

In den Warenkorb Button

Eine reaktionsschnelle Komponente für die Schaltfläche "In den Warenkorb", die in einem skeuomorphen Stil gestaltet ist, mit leuchtenden Farben und Unterstützung für dunkle Themen, die für Social-Media-Schnittstellen geeignet ist.

Offen