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.
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">
© 2023 Your Company. All rights reserved.
</footer>
</div>Componentes relacionados
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.
Componente de inicio de sesión social
Un componente de inicio de sesión social de inspiración retro/vintage con soporte para modo oscuro, diseño responsivo y estética nostálgica de los años 80/90.
Componente de inicio de sesión social
Un complejo componente de inicio de sesión social inspirado en los principios de Material Design, con ricos tonos joya, diseño receptivo y soporte de modo oscuro para interfaces de redes sociales.