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.
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 rounded-lg shadow-md p-6 w-full max-w-xs">
<h2 class="text-center text-lg font-semibold text-gray-900 dark:text-gray-100">Login with</h2>
<div class="mt-4 flex justify-around w-full">
<button class="flex items-center justify-center w-1/3 p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<img src="https://picsum.photos/24/24?random=1" alt="Google Logo" class="mr-2 rounded-full">
Google
</button>
<button class="flex items-center justify-center w-1/3 p-2 bg-gray-700 text-white rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50">
<img src="https://picsum.photos/24/24?random=2" alt="Facebook Logo" class="mr-2 rounded-full">
Facebook
</button>
</div>
<div class="mt-4 text-center">
<span class="text-gray-500 dark:text-gray-400">or</span>
</div>
<input type="email" placeholder="Email" class="mt-4 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<input type="password" placeholder="Password" class="mt-2 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<button class="mt-4 w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Log In
</button>
<p class="mt-2 text-center text-gray-600 dark:text-gray-400 text-sm">
Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a>
</p>
</div>
</div>Componentes relacionados
Componente de inicio de sesión social Art Deco
Un complejo componente de inicio de sesión social diseñado con una estética Art Deco para CRM/Business Tools, con patrones geométricos, neutros cálidos y capacidad de respuesta total con soporte para modo oscuro.
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.
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.