Komponenten Social Login Social-Login-Komponente

Social-Login-Komponente

Eine reaktionsschnelle Social-Login-Komponente im Dark-Modus, die für ein Dashboard entwickelt wurde, mit einem triadischen Farbschema und reichhaltigen interaktiven Elementen. Es umfasst Anmeldeoptionen mit verschiedenen sozialen Plattformen, Visualisierung von Benutzerdaten und Steuerelemente.

Vorschau

HTML-Code

<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
    <h2 class="text-3xl font-bold mb-6">Login to Your Dashboard</h2>
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 w-full max-w-sm">
        <div class="flex justify-between mb-4">
            <span class="text-lg font-semibold">Sign in with:</span>
            <img src="https://picsum.photos/30/30?random=1" alt="Avatar" class="rounded-full">
        </div>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=2" alt="Facebook" /> Facebook
            </a>
            <a href="#" class="flex items-center justify-center bg-green-700 text-white font-bold py-2 px-4 rounded hover:bg-green-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=3" alt="Google" /> Google
            </a>
            <a href="#" class="flex items-center justify-center bg-red-700 text-white font-bold py-2 px-4 rounded hover:bg-red-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=4" alt="Twitter" /> Twitter
            </a>
        </div>
        <div class="mt-6 text-center">
            <span class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></span>
        </div>
    </div>
    <footer class="mt-6 text-gray-400 text-xs">
        &copy; 2023 Your Company. All rights reserved.
    </footer>
</div>

Verwandte Komponenten

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

Social-Login-Komponente

Responsive Social Login-Komponente mit Mikrointeraktionen - Konzentriert sich auf kleine, ansprechende Animationen, die auf Benutzeraktionen reagieren, komplementäres Farbschema, einfache Komplexitätsstufe, für Blog-/Content-Zwecke, mit Unterstützung für dunkle Themen.

Offen

Social-Login-Komponente

Eine komplexe, reaktionsschnelle Social-Login-Komponente, die für Dashboards entwickelt wurde. Verwendet eine Benutzeroberfläche im Dunkelmodus mit einem Graustufen-Farbschema. Verfügt über Schaltflächen für soziale Anbieter, ein E-Mail-/Passwort-Formular, einen "Remember me"-Schalter und ein Trennzeichen mit alternativen Anmeldeoptionen. Vollständig reaktionsschnell mit Bildillustration und verwendet Tailwind CSS mit dem Präfix dark: für die Unterstützung des dunklen Designs. Kein JavaScript erforderlich.

Offen