Componenti Accesso sociale Componente Social Login

Componente Social Login

Un componente di accesso social reattivo in modalità oscura progettato per una dashboard, con combinazione di colori triadici e ricchi elementi interattivi. Include opzioni di accesso con varie piattaforme social, visualizzazione dei dati degli utenti e controlli.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente Retro Social Login

Un componente di accesso social semplice e reattivo con un'estetica retrò/vintage anni '80/'90 che utilizza una tavolozza di colori foresta/verde. Include il supporto per la modalità oscura.

Aperto

Componente Social Login

Un componente di accesso sociale dal design piatto minimalista con effetti reattivi e supporto per temi scuri.

Aperto

Componente Social Login

Un complesso componente di accesso social per un marketplace, con pulsanti di accesso social, campi e-mail/password e link "password dimenticata"/"iscriviti". Progettato con i principi del Material Design utilizzando toni gioiello, piena reattività e supporto per la modalità oscura.

Aperto