Componentes Inicio de sesión social Componente de inicio de sesión social

Componente de inicio de sesión social

Un componente de inicio de sesión social minimalista diseñado con Tailwind CSS, con espacios limpios y efectos responsivos para temas claros y oscuros.

Vista previa

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

Componentes relacionados

Componente de inicio de sesión social

Componente de inicio de sesión social receptivo con microinteracciones: centrado en animaciones pequeñas y atractivas que responden a las acciones del usuario, combinación de colores complementaria, nivel de complejidad simple, para fines de blog / contenido, con soporte de tema oscuro.

Abrir

Brutalista Social Login (Moda/Belleza)

Un componente de inicio de sesión social brutalista complejo y vibrante diseñado para marcas de moda y belleza, con alto contraste, elementos audaces y capacidad de respuesta total con soporte para modo oscuro.

Abrir

Componente de inicio de sesión social de lujo para la aplicación meteorológica

Un componente de inicio de sesión social elegante y sofisticado diseñado para una aplicación meteorológica/climática, con colores de alto contraste, tipografía refinada y compatibilidad con el modo oscuro. Ofrece múltiples opciones de inicio de sesión y una sensación moderna y premium.

Abrir