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

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
    <div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-lg font-semibold text-center text-gray-800 dark:text-gray-200">Login with</h2>
        <div class="mt-4">
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Google Logo" class="mr-2 rounded-full">
                Google
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition duration-200">
                <img src="https://randomuser.me/api/portraits/med/men/50.jpg" alt="Facebook Logo" class="mr-2 rounded-full">
                Facebook
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Twitter Logo" class="mr-2 rounded-full">
                Twitter
            </button>
        </div>
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600">Sign in with email</a>
        </div>
    </div>
</div>

Verwandte Komponenten

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

Material Design Social Login-Komponente

Material Design Social Login-Komponente mit komplementärem Farbschema, mäßige Komplexität, für Blog-/Content-Zwecke, reaktionsschnell mit Unterstützung des Dunkelmodus unter Verwendung von Tailwind CSS.

Offen

Social-Login-Komponente

Eine Retro-/Vintage-Social-Login-Komponente, die für E-Commerce-Plattformen mit pastellfarbenem Farbschema und Unterstützung für den Dunkelmodus entwickelt wurde.

Offen