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

OAuth-Schaltflächen-Komponente

Skeuomorphe OAuth-Tasten, die entwickelt wurden, um reale Elemente mit Erdtönen nachzuahmen, die für Social-Media-Schnittstellen gedacht sind.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md space-y-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Sign in with</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-[#e2b693] hover:bg-[#d1a579] dark:bg-[#704d3b] dark:hover:bg-[#6a4334] rounded-lg p-4 shadow-lg transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-[#94685b] hover:bg-[#805850] dark:bg-[#573c33] dark:hover:bg-[#4c3330] rounded-lg p-4 shadow-lg transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-[#574d44] hover:bg-[#4e422a] dark:bg-[#383025] dark:hover:bg-[#2e261e] rounded-lg p-4 shadow-lg transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Twitter</span>
        </a>
    </div>
</div>

Verwandte Komponenten

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 Webkomponente für OAuth-Authentifizierungsschaltflächen im Neumorphismus-Stil, die für ein Portfolio entwickelt wurde und ein responsives Layout mit Unterstützung für dunkle Designs enthält.

Offen

OAuth-Schaltflächen-Komponente

Eine Webkomponente mit OAuth-Schaltflächen mit einem 3D-Designstil, responsiven Effekten, Unterstützung für dunkle Designs und Platzhalterbildern.

Offen