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

Accesso social Brutalist (Moda/Bellezza)

Un componente di accesso sociale brutalista complesso e vibrante progettato per i marchi di moda e bellezza, caratterizzato da contrasto elevato, elementi audaci e piena reattività con supporto per la modalità oscura.

Aperto

Componente Social Login - Microinterazioni

Una scheda componente di accesso social che utilizza Tailwind CSS, con microinterazioni sui pulsanti (effetto scala al passaggio del mouse/messa a fuoco), reattività (larghezza massima centrata) e supporto per temi scuri. Utilizza un'immagine segnaposto da picsum.photos e SVG incorporati per le icone social. Niente JavaScript.

Aperto

Componente Social Login

Un componente minimalista per l'accesso sociale progettato con Tailwind CSS, caratterizzato da spazi puliti ed effetti reattivi sia per i temi chiari che per quelli scuri.

Aperto