CCHub Logo CCHub Tailwind Collection
Komponenten OAuth-Schaltflächen OAuth-Schaltflächen-Komponente

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 animate-pulse">Sign in with</h2>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-brown-600 rounded-lg shadow-md hover:shadow-lg dark:bg-brown-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Google Logo" class="w-6 h-6 rounded-full mr-2" />
        Google
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-blue-600 rounded-lg shadow-md hover:shadow-lg dark:bg-blue-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/26.jpg" alt="Facebook Logo" class="w-6 h-6 rounded-full mr-2" />
        Facebook
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-gray-700 rounded-lg shadow-md hover:shadow-lg dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Twitter Logo" class="w-6 h-6 rounded-full mr-2" />
        Twitter
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-orange-600 rounded-lg shadow-md hover:shadow-lg dark:bg-orange-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="GitHub Logo" class="w-6 h-6 rounded-full mr-2" />
        GitHub
    </button>
</div>

Verwandte Komponenten

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.

Offen

OAuth-Schaltflächen-Komponente

Eine komplexe Webkomponente für OAuth-Schaltflächen im Stil von Glasmorphismus und Erdtönen, die für Geschäfts-/Unternehmenswebsites mit Reaktionsfähigkeit und Unterstützung für den Dunkelmodus entwickelt wurde.

Offen

OAuth-Schaltflächen-Komponente

Eine Webkomponente mit OAuth-Schaltflächen, die mit einem skeuomorphen Stil gestaltet sind, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS.

Offen