Componente de inicio de sesión/registro 12
Un componente responsivo de inicio de sesión/registro diseñado en estilo de modo oscuro, que utiliza Tailwind CSS para el estilo.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-5">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-md">
<h2 class="text-2xl font-bold text-white text-center">Welcome</h2>
<p class="text-gray-400 text-center mb-6">Please login or signup to continue</p>
<div class="mb-4">
<label class="block text-gray-300 mb-1" for="email">Email</label>
<input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="email" id="email" placeholder="Enter your email" required />
</div>
<div class="mb-4">
<label class="block text-gray-300 mb-1" for="password">Password</label>
<input class="w-full bg-gray-700 text-white rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 p-2" type="password" id="password" placeholder="Enter your password" required />
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">Login</button>
<div class="flex items-center justify-between my-4">
<hr class="w-1/4 border-gray-600">
<span class="text-gray-400">or</span>
<hr class="w-1/4 border-gray-600">
</div>
<button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500">Signup</button>
<p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-400">Login</a></p>
<p class="text-gray-400 text-center">Need an account? <a href="#" class="text-green-400">Signup</a></p>
</div>
</div>
Componentes relacionados
Industrial_Candy_Login_Signup_Component
Un componente de inicio de sesión/registro receptivo con una estética industrial en bruto combinada con colores caramelo brillantes. Cuenta con elementos expuestos, diseño utilitario y soporte completo para el modo oscuro, adecuado para un blog o plataforma de contenido.
MaterialEarthToneLoginSignupComponent
Un componente de inicio de sesión y registro de estilo Material Design receptivo con combinación de colores en tonos tierra, complejidad moderada con alternancia interactiva entre formularios, diseñado para paneles con soporte para modo oscuro.
LoginSignupComponent
Un componente receptivo de inicio de sesión / registro diseñado con estilo Neumorphism y combinación de colores pastel para interfaces de redes sociales.