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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-sm w-full text-center">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome Back!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Login with your favorite social media account</p>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center space-x-2 border-2 border-blue-500 rounded-lg py-2 hover:bg-blue-500 hover:text-white transition duration-300">
<img src="https://picsum.photos/24/24" alt="Facebook Avatar" class="rounded-full">
<span class="font-semibold">Login with Facebook</span>
</a>
<a href="#" class="flex items-center justify-center space-x-2 border-2 border-red-500 rounded-lg py-2 hover:bg-red-500 hover:text-white transition duration-300">
<img src="https://picsum.photos/24/24" alt="Google Avatar" class="rounded-full">
<span class="font-semibold">Login with Google</span>
</a>
<a href="#" class="flex items-center justify-center space-x-2 border-2 border-yellow-500 rounded-lg py-2 hover:bg-yellow-500 hover:text-white transition duration-300">
<img src="https://picsum.photos/24/24" alt="Twitter Avatar" class="rounded-full">
<span class="font-semibold">Login with Twitter</span>
</a>
</div>
<div class="mt-6">
<span class="text-gray-500 dark:text-gray-400">Or login with your email</span>
</div>
<input type="email" placeholder="Email" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
<input type="password" placeholder="Password" class="mt-2 w-full p-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500">
<button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg py-2 transition duration-300">Login</button>
</div>
<div class="mt-4 text-gray-500 dark:text-gray-400">
<span>Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></span>
</div>
</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.
Componente de inicio de sesión social
Un componente de inicio de sesión social simple y receptivo que usa colores en escala de grises y estilo de diseño de microinteracciones, con soporte para temas oscuros que usa Tailwind CSS. Cuenta con sutiles animaciones de desplazamiento para íconos sociales.
Componente de inicio de sesión social
Un componente de inicio de sesión social de diseño plano minimalista con efectos responsivos y soporte para temas oscuros.