CCHub Logo CCHub Tailwind Collection
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

Luxus-Social-Login-Komponente für Wetter-App

Eine elegante und ausgeklügelte Social-Login-Komponente, die für eine Wetter-/Klimaanwendung entwickelt wurde, mit kontrastreichen Farben, verfeinerter Typografie und Unterstützung des Dunkelmodus. Es bietet mehrere Anmeldeoptionen und ein modernes, erstklassiges Gefühl.

Offen

Social Login Komponente - Immobilien (Aquarell/Neon)

Eine einfache, reaktionsschnelle Social-Login-Komponente für Immobilienplattformen mit einem Aquarell-/Kunststil und einem Neon-/Elektro-Farbschema. Enthält Unterstützung für den Dunkelmodus und semantisches HTML.

Offen

Social-Login-Komponente

Eine Retro-/Vintage-inspirierte Social-Login-Komponente mit Unterstützung für den Dunkelmodus, responsivem Design und nostalgischer Ästhetik aus den 80er/90er Jahren.

Offen