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 receptivo diseñado para el modo oscuro con un esquema de color monocromático. Adecuado para el consumo de blogs y contenido con funciones interactivas.

Vista previa

Código HTML

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

Componentes relacionados

Componente de inicio de sesión social

Un componente de inicio de sesión social receptivo inspirado en los principios de Material Design, con colores de alto contraste y soporte para modo oscuro, adecuado para plataformas de entretenimiento y medios.

Abrir

Componente de inicio de sesión social

Un componente de inicio de sesión social simple y esqueumórfico con colores complementarios, adecuado para un blog o sitio de contenido, diseñado para ser receptivo y admitir el modo oscuro.

Abrir

Neumorfismo del componente de inicio de sesión social

Componente de inicio de sesión social con diseño de neumorfismo, efectos responsivos y compatibilidad con temas oscuros.

Abrir