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 Einkaufswagen", die für den Dunkelmodus mit Tailwind CSS entwickelt wurde.

Vorschau

HTML-Code 

<div class="flex items-center justify-center p-10 bg-gray-900 min-h-screen">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <div class="flex items-center">
            <img src="https://picsum.photos/100" alt="Product Image" class="w-16 h-16 rounded-lg mr-4">
            <div class="text-white">
                <h2 class="text-lg font-semibold">Product Name</h2>
                <p class="text-gray-400">Product description goes here.</p>
                <p class="text-xl font-bold mt-2">$29.99</p>
            </div>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200 ease-in-out">
            Add to Cart
        </button>
    </div>
</div>

Verwandte Komponenten

Komponente der Schaltfläche "In den Warenkorb"

Eine reaktionsschnelle "In den Warenkorb"-Schaltflächenkomponente mit triadischen Farben, Mikrointeraktionsfokus und Unterstützung für den Dunkelmodus für E-Commerce-Anwendungen.

Offen

Retro Button "In den Warenkorb"

Responsive Schaltfläche "In den Warenkorb" mit Retro/Vintage-Design, komplementärem Farbschema und moderater Komplexität für einen Dashboard-Zweck. Unterstützt den Dunkelmodus.

Offen

In den Warenkorb Button

In den Warenkorb Button-Komponente mit minimalistischem/flachem Design, Graustufen-Farbschema, komplexer Komplexitätsstufe, für Dashboard-Zwecke, mit responsivem Design und Unterstützung für dunkle Themen.

Offen