CCHub Logo CCHub Tailwind Collection
Komponenten Social Login Social-Login-Komponente

Social-Login-Komponente

Eine minimalistische Flat-Design-Social-Login-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-xs">
        <h2 class="text-center text-lg font-semibold text-gray-900 dark:text-gray-100">Login with</h2>
        <div class="mt-4 flex justify-around w-full">
            <button class="flex items-center justify-center w-1/3 p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                <img src="https://picsum.photos/24/24?random=1" alt="Google Logo" class="mr-2 rounded-full">
                Google
            </button>
            <button class="flex items-center justify-center w-1/3 p-2 bg-gray-700 text-white rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50">
                <img src="https://picsum.photos/24/24?random=2" alt="Facebook Logo" class="mr-2 rounded-full">
                Facebook
            </button>
        </div>
        <div class="mt-4 text-center">
            <span class="text-gray-500 dark:text-gray-400">or</span>
        </div>
        <input type="email" placeholder="Email" class="mt-4 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        <input type="password" placeholder="Password" class="mt-2 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
        <button class="mt-4 w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            Log In
        </button>
        <p class="mt-2 text-center text-gray-600 dark:text-gray-400 text-sm">
            Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a>
        </p>
    </div>
</div>

Verwandte Komponenten

Social-Login-Komponente

Eine minimalistische Social-Login-Komponente, die mit Tailwind CSS entwickelt wurde und saubere Räume und reaktionsschnelle Effekte für helle und dunkle Themen bietet.

Offen

Social-Login-Komponente

Eine einfache, reaktionsschnelle Social-Login-Komponente mit Graustufenfarben und Microinteractions-Designstil mit Unterstützung für dunkle Designs mit Tailwind CSS. Bietet subtile Hover-Animationen für soziale Symbole.

Offen

Social-Login-Komponente

Eine einfache Social-Login-Komponente mit einem skeuomorphen Design, Erdtönen und einem responsiven Layout mit Unterstützung für den Dunkelmodus. Diese Komponente eignet sich für Blog- oder Content-Konsum-Websites und bietet ein visuell ansprechendes und benutzerfreundliches Anmeldeerlebnis.

Offen