Componente de inicio de sesión social
Componente de inicio de sesión social con diseño de materiales, colores pastel y complejidad moderada para negocios / corporativos
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="px-8 py-6 mt-4 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login</h3>
<div class="mt-4">
<div>
<label class="block text-gray-700 dark:text-gray-200" for="email">Email</label>
<input type="email" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="mt-4">
<label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
<input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900">Login</button>
<a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a>
</div>
<div class="mt-6 text-center">
<p class="text-gray-700 dark:text-gray-200">Or login with:</p>
<div class="flex justify-center gap-4 mt-2">
<button class="px-4 py-2 border rounded-md flex items-center gap-2 hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" class="h-5">
Google
</button>
<button class="px-4 py-2 border rounded-md flex items-center gap-2 hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1200px-2021_Facebook_icon.svg.png" alt="Facebook" class="h-5">
Facebook
</button>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de inicio de sesión social
Un componente de inicio de sesión social complejo para un mercado, con botones de inicio de sesión social, campos de correo electrónico/contraseña y enlaces de "olvidé mi contraseña"/"registro". Diseñado con los principios de Material Design utilizando tonos joya, capacidad de respuesta total y compatibilidad con modo oscuro.
Componente de inicio de sesión social
Un componente de inicio de sesión social con una estética industrial de materia prima que utiliza colores neutros fríos, adecuado para sistemas de reserva y reservas. Cuenta con botones de inicio de sesión social y un separador con una opción de inicio de sesión manual, todos responsivos y con soporte para modo oscuro.
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.