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 Art Deco Social Login

Un complesso componente di accesso sociale ispirato all'Art Déco con combinazione di colori caramelle/dolci, progettato per le dashboard, completamente reattivo con supporto per la modalità oscura.

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

Componente di accesso social per la progettazione dei materiali

Componente di accesso sociale Material Design con combinazione di colori complementari, complessità moderata, per scopi di blog/contenuti, reattivo con supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto