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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<div class="w-full max-w-sm">
<div class="mb-6 text-center">
<h1 class="text-2xl font-bold">Authentication</h1>
<p class="text-gray-400">Please sign in or create an account</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<form>
<div class="mb-4">
<label for="email" class="block mb-2 text-sm font-medium">Email</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
</div>
<div class="mb-4">
<label for="password" class="block mb-2 text-sm font-medium">Password</label>
<input type="password" id="password" placeholder="********" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
</div>
<div class="flex items-center justify-between mb-6">
<div>
<input type="checkbox" id="remember" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<label for="remember" class="ml-2 text-sm">Remember me</label>
</div>
<a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
</div>
<button type="submit" class="w-full py-2 mt-2 text-white bg-blue-600 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-500">Sign In</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-400">or</p>
<button class="w-full py-2 mt-2 text-white bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Sign Up</button>
</div>
</div>
<div class="mt-6 text-center">
<img src="https://picsum.photos/100/100" alt="Random placeholder" class="rounded-full mx-auto mb-2">
<p class="text-gray-400 text-sm">Random User Avatar</p>
</div>
</div>
</div>Componentes relacionados
Auth_Component_Watercolor_Artistic
Un componente de autenticación simple y receptivo diseñado con una estética suave, acuarela / artística. Cuenta con colores neutros cálidos y soporte para modo oscuro, adecuado para sitios web de eventos o conferencias.
Authentication_Components_Component
Un componente de autenticación simple y receptivo para redes sociales con microinteracciones, combinación de colores complementaria y soporte de temas oscuros mediante Tailwind CSS.
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.