CCHub Logo CCHub Tailwind Collection
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ächen-Komponente

Eine reaktionsschnelle OAuth-Schaltflächenkomponente mit Skeuomorphismus-Design, analogem Farbschema und komplexen Interaktionen, die für Social-Media-Schnittstellen geeignet ist. Enthält Unterstützung für dunkle Themen und verwendet Tailwind CSS für das Styling, ohne JavaScript. Bilder von Lorem Picsum und RandomUser.me.

Offen

OAuth-Schaltflächen-Komponente

Eine reaktionsschnelle OAuth-Schaltflächenkomponente mit einem 3D-Designstil, Unterstützung für dunkle Designs und Platzhalterbildern. Die Komponente verfügt über Schaltflächen für Google, Facebook, Twitter und LinkedIn mit Hover-Effekten für Tiefe und Engagement.

Offen