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.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl mb-6 text-center">Welcome Back</h2>
<form>
<div class="mb-4">
<label class="block text-gray-300 mb-2" for="email">Email</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2" for="password">Password</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password" placeholder="********" required>
</div>
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Login</button>
</form>
<div class="mt-4 text-center">
<span class="text-gray-400">or</span>
</div>
<div class="mt-4">
<p class="text-gray-400 text-center">Don't have an account? <a href="#" class="text-indigo-400 hover:underline">Sign up</a></p>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4 mt-10">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl mb-6 text-center">Create Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-300 mb-2" for="name">Name</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="text" id="name" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-300 mb-2" for="email-signup">Email</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email-signup" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2" for="password-signup">Password</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password-signup" placeholder="********" required>
</div>
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Sign Up</button>
</form>
<div class="mt-4 text-center">
<span class="text-gray-400">or</span>
</div>
<div class="mt-4">
<p class="text-gray-400 text-center">Already have an account? <a href="#" class="text-indigo-400 hover:underline">Login</a></p>
</div>
</div>
</div>Componentes relacionados
Componentes de autenticación
Componentes de autenticación Componente con diseño 3D, combinación de colores monocromática, complejidad simple y propósito de cartera. Diseño responsivo con soporte para temas oscuros.
3D_Auth_Agriculture_Simple
Un componente de autenticación simple y receptivo con una estética de diseño 3D y un esquema de color de alto contraste, adecuado para sitios web de agricultura/ganadería. Cuenta con soporte para el modo oscuro.
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.