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
Componentes de autenticación
Un componente de autenticación responsivo diseñado en la interfaz de usuario del modo oscuro, con formularios de inicio de sesión y registro con imágenes de marcador de posición.
Componente de componentes de autenticación
Un componente de autenticación de modo oscuro receptivo para paneles, que utiliza tonos tierra para una estética natural.
Componente de componentes de autenticación
Un componente de autenticación diseñado por Neumorphic para comercio electrónico con colores vibrantes, compatibilidad con temas oscuros y diseño receptivo.