Komponenten OAuth-Schaltflächen OAuth-Schaltflächen-Komponente

OAuth-Schaltflächen-Komponente

Eine Reihe von OAuth-Schaltflächen, die mit einer brutalistischen Ästhetik und Tailwind CSS gestaltet sind, mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h1 class="text-4xl font-extrabold text-black dark:text-white mb-5">Login with</h1>
    <div class="flex space-x-4">
        <a href="#" class="bg-blue-500 dark:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-400 dark:hover:bg-blue-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=1" alt="OAuth Provider 1" class="inline-block mr-2 rounded-full">
            Provider 1
        </a>
        <a href="#" class="bg-red-500 dark:bg-red-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-red-400 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=2" alt="OAuth Provider 2" class="inline-block mr-2 rounded-full">
            Provider 2
        </a>
        <a href="#" class="bg-green-500 dark:bg-green-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-green-400 dark:hover:bg-green-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=3" alt="OAuth Provider 3" class="inline-block mr-2 rounded-full">
            Provider 3
        </a>
    </div>
</div>

Verwandte Komponenten

OAuth-Schaltflächenkomponente (Dunkelmodus, monochromatisch)

Responsive OAuth Buttons-Komponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Verwendet ein monochromatisches Farbschema mit dunklem Hintergrund.

Offen

OAuth-Schaltflächen-Komponente 1

Eine Komponente, die OAuth-Schaltflächen mit ansprechenden Animationen und Unterstützung für den Dunkelmodus anzeigt und Tailwind CSS für das Design verwendet. Die Schaltflächen reagieren auf Benutzeraktionen mit subtilen Mikrointeraktionen, und Bilder werden aus zufälligen Platzhalterquellen eingefügt.

Offen

OAuth-Schaltflächen-Komponente

Eine reaktionsschnelle OAuth-Schaltflächenkomponente mit ansprechenden Animationen und Erdtönen, die für Social-Media-Schnittstellen geeignet ist und dunkle Themen unterstützt.

Offen