Componentes Botones OAuth Componente de botones OAuth

Componente de botones OAuth

Un componente de botones OAuth receptivo diseñado para el modo oscuro con una combinación de colores vibrantes, adecuado para sitios web comerciales profesionales.

Vista previa

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

Componentes relacionados

Componente de botones OAuth

Componente brutalista de botones OAuth para un portafolio con combinación de colores complementaria. Responsivo con soporte para modo oscuro.

Abrir

Componente de botones OAuth - Acuarela/Artístico

Un componente de botones OAuth artístico y de temática retro diseñado para marcas de moda y belleza. Cuenta con texturas suaves y pintadas, colores vintage apagados e incluye opciones para el inicio de sesión en Google, Apple y Facebook. Totalmente responsivo y compatible con el modo oscuro.

Abrir

Componente de botones OAuth

Componente de botones OAuth con temática retro / vintage / 80 / 90s con esquema de color análogo, complejidad moderada, para redes sociales, diseño receptivo con soporte de modo oscuro. No hay JS, solo HTML con clases de Tailwind.

Abrir