Componenti Pulsanti OAuth Componente Pulsanti OAuth

Componente Pulsanti OAuth

Un componente pulsanti OAuth reattivo progettato in modalità scura utilizzando Tailwind CSS, con sfondi scuri ed elementi dell'interfaccia utente ottimizzati per ambienti con scarsa illuminazione.

Anteprima

Codice HTML

<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl font-bold mb-4 text-center">Login with</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-between bg-red-600 text-white rounded-lg p-3 hover:bg-red-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://picsum.photos/30/30" alt="Google" class="rounded-full mr-3" />
                    <span>Google</span>
                </div>
                <span>></span>
            </a>
            <a href="#" class="flex items-center justify-between bg-blue-600 text-white rounded-lg p-3 hover:bg-blue-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="rounded-full mr-3" />
                    <span>Facebook</span>
                </div>
                <span>></span>
            </a>
            <a href="#" class="flex items-center justify-between bg-gray-600 text-white rounded-lg p-3 hover:bg-gray-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Twitter" class="rounded-full mr-3" />
                    <span>Twitter</span>
                </div>
                <span>></span>
            </a>
        </div>
    </div>
</div>

Componenti correlati

Componente Pulsanti OAuth

Un componente pulsanti OAuth reattivo progettato per la modalità scura con una combinazione di colori analoga, con più elementi interattivi per i social media.

Aperto

Componente pulsanti OAuth (modalità scura monocromatica)

Componente pulsanti OAuth reattivi con supporto della modalità oscura utilizzando Tailwind CSS. Utilizza una combinazione di colori monocromatica con sfondi scuri.

Aperto

Componente Pulsanti OAuth

Componente pulsanti OAuth con microinterazioni per un portfolio, caratterizzato da una combinazione di colori vivaci e un layout semplice, con design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto