Componenti Accesso sociale Componente Social Login

Componente Social Login

Un componente di accesso social reattivo progettato per la modalità scura utilizzando una combinazione di colori monocromatica. Adatto per il consumo di blog e contenuti con funzionalità interattive.

Anteprima

Codice HTML

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

Componenti correlati

Componente Social Login

Un componente di accesso sociale semplice e skeumorfico con colori complementari, adatto per un blog o un sito di contenuti, progettato per essere reattivo e supportare la modalità oscura.

Aperto

Componente Social Login

Un componente di accesso social pulito e affidabile per siti Web di eventi e conferenze, con un tema sfumato multicolore e supporto per la modalità scura. Progettato per uso aziendale/professionale.

Aperto

Componente Social Login

Un componente di accesso sociale semplice, pulito e reattivo con una tavolozza di colori verde foresta, progettato per siti Web di notizie/giornalismo, che enfatizza la tipografia e i sistemi a griglia. Include il supporto per la modalità oscura.

Aperto