CCHub Logo CCHub Tailwind Collection
Komponenten In den Warenkorb Button In den Warenkorb Button

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.

Vorschau

HTML-Code 

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col items-center relative overflow-hidden w-80">
        <img class="rounded-md w-full mb-4 h-32 object-cover" src="https://picsum.photos/400/200" alt="Product Image" />
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the product. It tells you what you can expect from this item.</p>
        <div class="flex items-center justify-between w-full mt-4">
            <span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                Add to Cart
            </button>
        </div>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-900 rounded-full w-16 h-16 shadow-lg flex items-center justify-center">
            <img class="rounded-full w-12 h-12 border-2 border-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="User Avatar" />
        </div>
    </div>
</div>

Verwandte Komponenten

In den Warenkorb Button

Responsive Schaltfläche "In den Warenkorb" mit skeuomorphem Design, monochromatischem Farbschema und Unterstützung für dunkle Themen.

Offen

Komponente der Schaltfläche "In den Warenkorb"

Eine vom Brutalismus inspirierte Add-to-Cart-Button-Komponente mit Tailwind CSS mit hohem Kontrast, ungewöhnlichen Layouts, responsiven Effekten und Unterstützung für dunkle Themen.

Offen

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