CCHub Logo CCHub Tailwind Collection
Komponenten Schaltfläche "Folgen" Follow-Button-Komponente

Follow-Button-Komponente

Eine reaktionsschnelle Follow-Button-Komponente, die im Material Design-Stil mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS entworfen wurde.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg space-y-4">
        <img src="https://picsum.photos/100" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500 shadow-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Software Developer</p>
        <button class="flex items-center justify-center w-full px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600">
            <span>Follow</span>
        </button>
    </div>
</div>

Verwandte Komponenten

Schaltfläche "Folgen"

Ein einfacher Follow-Button mit Material Design-Styling, responsiven Effekten und Unterstützung für dunkle Designs.

Offen

Follow-Button-Komponente

Ein sauberer, minimalistischer "Follow"-Button mit einer Retro-/Vintage-Farbpalette, der sich für ein Dashboard oder eine Profilseite eignet. Er verfügt über einen interaktiven Hover-Status und Unterstützung für den Dunkelmodus, der die Prinzipien der schweizerischen/internationalen Typografie verkörpert.

Offen

Follow-Button-Komponente

Eine einfache, reaktionsschnelle Follow-Button-Komponente, die für Dating-/Social-Media-Plattformen mit pastellfarbenem Farbschema und Unterstützung für den Dunkelmodus entwickelt wurde.

Offen