Componenti Pulsanti OAuth Componente Pulsanti OAuth

Componente Pulsanti OAuth

Un componente reattivo dei pulsanti OAuth progettato per la modalità oscura con una combinazione di colori vivaci, adatto per siti Web aziendali professionali.

Anteprima

Codice HTML

<div class="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-6">
    <h2 class="text-4xl font-bold text-white mb-6">Login with OAuth</h2>
    <div class="flex flex-col gap-4 w-full max-w-md">
        <a href="#" class="flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Facebook Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/40.jpg" alt="LinkedIn Logo" class="w-6 h-6 mr-3" />
            <span>Continue with LinkedIn</span>
        </a>
    </div>
    <p class="mt-6 text-gray-400">Or</p>
    <a href="#" class="mt-2 text-white underline">Login with Email</a>
</div>

Componenti correlati

Componente Pulsanti OAuth

Un componente semplice, pulito e minimalista per la visualizzazione dei pulsanti di accesso OAuth, che aderisce ai principi di progettazione della tipografia svizzera/internazionale. Presenta monocromatico in bianco e nero con un colore d'accento brillante, piena reattività e supporto per la modalità scura, ideale per la documentazione o i siti wiki.

Aperto

Componente Pulsanti OAuth

Un componente web complesso per pulsanti OAuth con glassmorphism e toni della terra, progettato per siti web aziendali/aziendali con supporto per reattività e modalità scura.

Aperto

Componente Pulsanti OAuth

Componente semplice e reattivo per i pulsanti di accesso OAuth con un design scheumorfico, combinazione di colori analoga e supporto per la modalità scura, adatto per piattaforme di forum/comunità.

Aperto