Componente de inicio de sesión social de Material Design
Componente de inicio de sesión social de Material Design con esquema de color complementario, complejidad moderada, para fines de blog / contenido, receptivo con soporte de modo oscuro usando Tailwind CSS.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-96">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<img class="h-5 w-5 mr-2" src="https://fonts.gstatic.com/s/i/productlogos/google/v6/24px.svg" alt="Google logo">
Sign in with Google
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.791 9.362 8.75 10l-.002-.002v-.001l.002.001V17h-3v-5h3V9c0-3.306 1.976-5.164 4.936-5.164C15.232 3.836 16.5 4 16.5 4v3h-2.473c-1.742 0-2.527.873-2.527 2.075V12h4.999l-.649 5h-4.35v5.999c5-.638 8.75-4.918 8.75-10C24 5.373 18.627 0 12 0z" />
</svg>
Sign in with Facebook
</button>
</div>
<div class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
</div>
</div>
</div>Componentes relacionados
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.
Componente de inicio de sesión social de lujo para la aplicación meteorológica
Un componente de inicio de sesión social elegante y sofisticado diseñado para una aplicación meteorológica/climática, con colores de alto contraste, tipografía refinada y compatibilidad con el modo oscuro. Ofrece múltiples opciones de inicio de sesión y una sensación moderna y premium.
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.