MinimalistAuthForm
Un componente de formulario de inicio de sesión minimalista y receptivo diseñado para carteras o aplicaciones web. Presenta una estética de diseño plano con una combinación de colores complementaria: el azul se usa para los elementos interactivos en el modo claro y el naranja se usa en el modo oscuro. El formulario incluye campos para correo electrónico y contraseña, una opción 'recordarme', un enlace 'olvidé mi contraseña', una opción para registrarse e integración de inicio de sesión social (por ejemplo, GitHub). Es compatible con el tema oscuro y está construido puramente con HTML y Tailwind CSS para una fácil integración.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 lg:p-8 selection:bg-blue-500 selection:text-white dark:selection:bg-orange-500 dark:selection:text-white">
<div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-xl shadow-lg w-full max-w-md">
<div class="text-center mb-6 sm:mb-8">
<!-- Optional: Logo (example using picsum.photos) -->
<!-- <img class="mx-auto h-12 w-auto mb-4" src="https://picsum.photos/seed/formlogo/150/50" alt="Company Logo"> -->
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">
Sign In
</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Welcome back! Please enter your details.
</p>
</div>
<form action="#" method="POST" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email address</label>
<input type="email" name="email" id="email" autocomplete="email" required
class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
</div>
<div>
<div class="flex items-center justify-between mb-1">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
Forgot password?
</a>
</div>
</div>
<input type="password" name="password" id="password" autocomplete="current-password" required
class="appearance-none block w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500">
</div>
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox"
class="h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-orange-500 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-orange-500 dark:checked:border-orange-500 transition-colors duration-150">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-500 dark:focus:ring-offset-gray-800 transition-colors duration-150">
Sign In
</button>
</div>
</form>
<p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
Not a member?
<a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-orange-400 dark:hover:text-orange-500 transition-colors duration-150">
Create an account
</a>
</p>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
Or continue with
</span>
</div>
</div>
<div class="mt-6 grid grid-cols-1 gap-3">
<div>
<a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.166 6.839 9.489.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.03-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.338 4.695-4.566 4.942.359.308.678.92.678 1.852 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0020 10c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
</svg>
Sign in with GitHub
</a>
</div>
<!-- Example for Google Icon (you would need the SVG) -->
<!--
<div>
<a href="#" class="w-full inline-flex justify-center items-center py-2.5 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-150">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">Path for Google icon</svg>
Sign in with Google
</a>
</div>
-->
</div>
</div>
</div>
</div>Componentes relacionados
Componentes de autenticación
Un componente de autenticación responsivo que admite el modo oscuro, que utiliza CSS de Tailwind con fondos oscuros, un formulario de inicio de sesión y registro, e imágenes de marcador de posición aleatorias para los elementos de la interfaz de usuario.
AuthComponent
Un componente de autenticación skeuomórfico diseñado con Tailwind CSS que presenta efectos responsivos y compatibilidad con temas oscuros.
Componentes de autenticación
Un componente de autenticación simple para sitios web comerciales y corporativos que utiliza Material Design y un esquema de color complementario con Tailwind CSS.