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

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.

Vorschau

HTML-Code 

<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Google
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Facebook
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Twitter
    </button>
</div>
<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        button {
            background-color: #1e3a8a;
        }
    }
</style>

Verwandte Komponenten

OAuth-Schaltflächen-Komponente

Brutalistische OAuth-Buttons-Komponente für ein Portfolio mit komplementärem Farbschema. Reaktionsschnell mit Unterstützung für den Dunkelmodus.

Offen

OAuth-Schaltflächen-Komponente

Eine OAuth Buttons-Komponente im Neumorphism-Stil, die für einen Blog oder eine Plattform zum Konsum von Inhalten entwickelt wurde. Die Komponente verfügt über Schaltflächen für verschiedene OAuth-Anbieter mit responsivem Design, Unterstützung für dunkle Themen und einem monochromatischen Farbschema.

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