RetroLoginFormComponent
Formulario de inicio de sesión retro/vintage responsivo, compatible con temas oscuros, con tonos tierra, adecuado para sitios web comerciales/corporativos. Utiliza elementos mínimos.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900">
<div class="max-w-md w-full p-8 bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg">
<h2 class="text-center text-3xl font-extrabold text-stone-800 dark:text-stone-200 mb-6">Welcome Back</h2>
<form class="space-y-6">
<div>
<label for="email" class="sr-only">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Email address">
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Password">
</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-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-700 rounded">
<label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-100">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-amber-600 hover:text-amber-500">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-800 dark:hover:bg-amber-700">
Sign in
</button>
</div>
</form>
</div>
</div>
Componentes relacionados
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión minimalista diseñado con un esquema de color triádico adecuado para la exhibición de portafolios con soporte para modo oscuro.
Brutalist_Login_Form_Travel_Tourism
Un formulario de inicio de sesión de complejidad media, estilo brutalista con colores vibrantes, diseñado para sitios web de viajes y turismo. Cuenta con alto contraste, tipografía audaz y capacidad de respuesta completa con soporte para modo oscuro.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión complejo y receptivo con tonos tierra, influencias de Material Design, adecuado para sitios web comerciales / corporativos, e incluye soporte para modo oscuro.