Componente de inicio de sesión social
Un componente de inicio de sesión social retro/vintage diseñado para plataformas de comercio electrónico con una combinación de colores pastel y compatibilidad con el modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 p-6">
<div class="bg-pastel-pink rounded-lg shadow-lg p-8 w-80">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6 text-center">Log in using your favorite social media account</p>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-blue-400 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-500 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
Login with Facebook
</a>
<a href="#" class="flex items-center justify-center bg-red-400 dark:bg-red-700 text-white rounded-lg p-2 hover:bg-red-500 dark:hover:bg-red-600 transition duration-200 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
Login with Google
</a>
<a href="#" class="flex items-center justify-center bg-green-400 dark:bg-green-700 text-white rounded-lg p-2 hover:bg-green-500 dark:hover:bg-green-600 transition duration-200 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
Login with Twitter
</a>
</div>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-400 dark:text-blue-300 hover:underline">Sign up</a></p>
</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 componente de inicio de sesión social simple, limpio y receptivo con una paleta de colores verde bosque, diseñado para sitios web de noticias/periodismo, que enfatiza la tipografía y los sistemas de cuadrícula. Incluye soporte para modo oscuro.