Componenti Accesso sociale Componente Social Login

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.

Anteprima

Codice HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
    <div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-lg font-semibold text-center text-gray-800 dark:text-gray-200">Login with</h2>
        <div class="mt-4">
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Google Logo" class="mr-2 rounded-full">
                Google
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition duration-200">
                <img src="https://randomuser.me/api/portraits/med/men/50.jpg" alt="Facebook Logo" class="mr-2 rounded-full">
                Facebook
            </button>
            <button class="flex items-center justify-center w-full p-2 mb-4 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-200">
                <img src="https://picsum.photos/20/20" alt="Twitter Logo" class="mr-2 rounded-full">
                Twitter
            </button>
        </div>
        <div class="text-center">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600">Sign in with email</a>
        </div>
    </div>
</div>

Componenti correlati

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

Componente Social Login

Un componente di accesso sociale retrò/vintage progettato per piattaforme di e-commerce con una combinazione di colori pastello e supporto per la modalità scura.

Aperto

Componente Social Login

Componente Social Login con design Microinteractions, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto