Componente de inicio de sesión social
Un componente de inicio de sesión social minimalista diseñado para sitios web comerciales/corporativos con un esquema de color complementario y soporte para modo oscuro.
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-8 w-96">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login with Social Media</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Google Logo"> Login with Google
</button>
<button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Facebook Logo"> Login with Facebook
</button>
<button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="LinkedIn Logo"> Login with LinkedIn
</button>
</div>
<div class="mt-4 text-center text-gray-600 dark:text-gray-400">
<p>Or login with your email</p>
</div>
<div class="mt-4 flex flex-col space-y-4">
<input type="email" placeholder="Email" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
<input type="password" placeholder="Password" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
<button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-200">Login</button>
</div>
</div>
</div>Componentes relacionados
Componente de inicio de sesión social: microinteracciones
Una tarjeta de componente de inicio de sesión social que usa Tailwind CSS, con microinteracciones en los botones (efecto de escala al pasar el mouse/focus), capacidad de respuesta (ancho máximo centrado) y soporte de temas oscuros. Utiliza una imagen de marcador de posición de picsum.photos y SVG incrustados para iconos sociales. Sin JavaScript.
Componente de inicio de sesión social
Un componente de inicio de sesión social minimalista diseñado con Tailwind CSS, con espacios limpios y efectos responsivos para temas claros y oscuros.
Componente de inicio de sesión social
Un componente de inicio de sesión social receptivo diseñado para el modo oscuro con un esquema de color monocromático. Adecuado para el consumo de blogs y contenido con funciones interactivas.