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 Komponente für den "In den Warenkorb"-Schaltfläche, die im brutalistischen Stil mit leuchtenden Farben gestaltet ist und sich für Social-Media-Schnittstellen mit Unterstützung für dunkle Themen eignet.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 border border-red-600 dark:border-red-400 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <h2 class="text-2xl font-bold mb-3 text-red-600 dark:text-red-400">Add to Cart</h2>
        <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-lg mb-4">
        <p class="text-lg font-medium text-gray-800 dark:text-gray-200">Check out this amazing product that you will love!</p>
        <div class="mt-5">
            <button class="bg-blue-600 dark:bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300 ease-in-out">
                Add to Cart
            </button>
        </div>
        <div class="mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-600 dark:border-red-400"> 
        </div>
    </div>
</div>

Verwandte Komponenten

In den Warenkorb Button

Eine 3D-Design-Schaltflächenkomponente "In den Einkaufswagen" mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

Glassmorphism In den Warenkorb Button

In den Warenkorb Schaltfläche mit Glasmorphismus-Stil, monochromatischem Farbschema und mittlerer Komplexität. Reaktionsschnell mit Unterstützung für den Dunkelmodus.

Offen

Komponente der Schaltfläche "In den Warenkorb"

Eine reaktionsschnelle "In den Warenkorb"-Schaltflächenkomponente, die nach den Prinzipien des Material Designs gestaltet ist, ein triadisches Farbschema aufweist und den Dunkelmodus unterstützt. Es wurde für die Verwendung im Dashboard entwickelt, enthält einen Mengenwähler und integriert Tiefeneffekte mit Tailwind CSS für Schatten und Animationen.

Offen