Corporate_Banking_Login_Form
Un formulario de inicio de sesión de diseño minimalista y plano adecuado para aplicaciones bancarias y de finanzas corporativas, con tonos azules profesionales, capacidad de respuesta total y compatibilidad con el modo oscuro.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-md">
<div class="md:flex">
<div class="w-full p-8">
<div class="text-center mb-8">
<h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-400 mb-2">Welcome Back</h2>
<p class="text-gray-600 dark:text-gray-400">Sign in to your account</p>
</div>
<form 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" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
<input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-2 border border-blue-300 dark:border-blue-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150 ease-in-out">
Sign in
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign up</a></p>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
Skeuomorphic_Social_Media_Form_Complex
Un componente de formulario de redes sociales complejo y esqueuomórfico con colores complementarios, diseño responsivo y compatibilidad con modo oscuro. Imita las sensaciones y texturas de los botones del mundo real.
Healthcare_Form_Gradient_Neon
Un componente de formulario de atención médica complejo y receptivo con degradados de color neón/eléctricos y transiciones suaves, compatible con el modo oscuro. Diseñado para aplicaciones médicas con múltiples elementos interactivos.
Componente de formas brutalistas
Un componente de formularios web diseñado con un estilo brutalista con alto contraste y diseños inusuales, adecuado para el comercio electrónico y responsivo con soporte para temas oscuros.