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

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

OAuth-Schaltflächen-Komponente

Glassmorphism OAuth Buttons-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

OAuth-Schaltflächen-Komponente

Retro / Vintage / 80er / 90er Jahre OAuth Buttons-Komponente mit analogem Farbschema, mäßiger Komplexität, für Social Media, responsives Design mit Unterstützung für den Dunkelmodus. Kein JS, nur HTML mit Tailwind-Klassen.

Offen