Componentes Botones OAuth Componente de botones OAuth

Componente de botones OAuth

Un componente de botones OAuth receptivo diseñado en modo oscuro usando Tailwind CSS, con fondos oscuros y elementos de interfaz de usuario optimizados para entornos con poca luz.

Vista previa

Código 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>

Componentes relacionados

Componente de botones OAuth

Un componente de botones OAuth simple y receptivo diseñado en estilo esqueuomórfico con una combinación de colores vibrantes, adaptado para plataformas de comercio electrónico y compatible con el modo oscuro.

Abrir

Componente de botones OAuth (modo oscuro, monocromático)

Componente de botones OAuth responsivo con soporte de modo oscuro mediante Tailwind CSS. Utiliza un esquema de color monocromático con fondos oscuros.

Abrir

Componente de botones OAuth

Un componente web para botones de autenticación OAuth con estilo de neumorfismo, diseñado para una cartera, e incluye un diseño responsivo con soporte para temas oscuros.

Abrir