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
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
Componente de inicio de sesión social de diseño de materiales con esquema de color análogo, complejidad simple, para fines de cartera, receptivo con soporte de tema oscuro.
SocialLoginComponent
Un componente de inicio de sesión social receptivo construido con Tailwind CSS, con sutiles microinteracciones de desplazamiento y soporte completo para el modo oscuro. Utiliza CDN de iconos simples para logotipos de redes sociales.