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

OAuth-Schaltflächen-Komponente

Eine reaktionsschnelle OAuth-Schaltflächenkomponente, die für den Dunkelmodus mit einem lebendigen Farbschema entwickelt wurde und für professionelle Unternehmenswebsites geeignet ist.

Vorschau

HTML-Code

<div class="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-6">
    <h2 class="text-4xl font-bold text-white mb-6">Login with OAuth</h2>
    <div class="flex flex-col gap-4 w-full max-w-md">
        <a href="#" class="flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Facebook Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/40.jpg" alt="LinkedIn Logo" class="w-6 h-6 mr-3" />
            <span>Continue with LinkedIn</span>
        </a>
    </div>
    <p class="mt-6 text-gray-400">Or</p>
    <a href="#" class="mt-2 text-white underline">Login with Email</a>
</div>

Verwandte Komponenten

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.

Offen

OAuth-Schaltflächenkomponente - Aquarell/Künstlerisch

Eine künstlerische OAuth-Buttons-Komponente im Retro-Stil, die für Mode- und Beauty-Marken entwickelt wurde. Verfügt über weiche, gemalte Texturen, gedämpfte Vintage-Farben und Optionen für die Anmeldung bei Google, Apple und Facebook. Vollständig reaktionsschnell und unterstützt den Dunkelmodus.

Offen

OAuth-Schaltflächen-Komponente

Eine reaktionsschnelle OAuth-Buttons-Komponente, die im Dunkelmodus mit Tailwind CSS entwickelt wurde, mit dunklen Hintergründen und UI-Elementen, die für Umgebungen mit schlechten Lichtverhältnissen optimiert sind.

Offen