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 de modo oscuro receptivo diseñado para un tablero, con un esquema de color triádico y elementos interactivos enriquecidos. Incluye opciones de inicio de sesión con varias plataformas sociales, visualización de datos de usuario y controles.

Vista previa

Código HTML

<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
    <h2 class="text-3xl font-bold mb-6">Login to Your Dashboard</h2>
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 w-full max-w-sm">
        <div class="flex justify-between mb-4">
            <span class="text-lg font-semibold">Sign in with:</span>
            <img src="https://picsum.photos/30/30?random=1" alt="Avatar" class="rounded-full">
        </div>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=2" alt="Facebook" /> Facebook
            </a>
            <a href="#" class="flex items-center justify-center bg-green-700 text-white font-bold py-2 px-4 rounded hover:bg-green-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=3" alt="Google" /> Google
            </a>
            <a href="#" class="flex items-center justify-center bg-red-700 text-white font-bold py-2 px-4 rounded hover:bg-red-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=4" alt="Twitter" /> Twitter
            </a>
        </div>
        <div class="mt-6 text-center">
            <span class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></span>
        </div>
    </div>
    <footer class="mt-6 text-gray-400 text-xs">
        &copy; 2023 Your Company. All rights reserved.
    </footer>
</div>

Componentes relacionados

Componente de inicio de sesión social

Componente de inicio de sesión social de diseño de materiales con esquema de color análogo, complejidad simple, para fines de cartera, receptivo con soporte de tema oscuro.

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