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
Un componente de inicio de sesión social complejo y receptivo diseñado para paneles. Utiliza una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Cuenta con botones de proveedor de redes sociales, un formulario de correo electrónico / contraseña, un interruptor "Recuérdame" y un separador con opciones de inicio de sesión alternativas. Totalmente responsivo con ilustración de imagen y utiliza Tailwind CSS con prefijo dark: para soporte de tema oscuro. No se necesita JavaScript.
Componente de inicio de sesión social
Un componente de inicio de sesión social retro/vintage diseñado para plataformas de comercio electrónico con una combinación de colores pastel y compatibilidad con el modo oscuro.
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.