Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión simple y receptivo diseñado con una paleta de colores pastel (rosas suaves y grises complementarios) y microinteracciones atractivas, como transiciones suaves y sutiles efectos de desplazamiento/enfoque. Diseñado para sitios web comerciales o corporativos, presenta un diseño limpio, es totalmente receptivo e incluye soporte integral para temas oscuros. Construido exclusivamente con HTML y Tailwind CSS.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-pink-50 dark:bg-slate-900 p-4 transition-colors duration-300">
<div class="bg-white dark:bg-slate-800 p-8 md:p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-500 hover:scale-105">
<h2 class="text-3xl font-bold text-center text-pink-600 dark:text-pink-400 mb-8">
Welcome Back
</h2>
<form action="#" method="POST" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Email address
</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
placeholder="[email protected]"
/>
</div>
<div>
<label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Password
</label>
<input
id="password"
name="password"
type="password"
autocomplete="current-password"
required
class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
placeholder="••••••••"
/>
</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-pink-500 dark:text-pink-400 focus:ring-pink-400 dark:focus:ring-pink-300 border-pink-300 dark:border-slate-500 rounded bg-pink-50 dark:bg-slate-700 transition duration-150 ease-in-out" />
<label for="remember-me" class="ml-2 block text-sm text-slate-800 dark:text-slate-300">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
Forgot password?
</a>
</div>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-medium text-white bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-slate-800 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
>
Sign In
</button>
</div>
</form>
<p class="mt-8 text-center text-sm text-slate-600 dark:text-slate-400">
Not a member?
<a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
Sign up now
</a>
</p>
</div>
</div>Componentes relacionados
Componente de formulario de inicio de sesión 3D
Un componente de formulario de inicio de sesión 3D receptivo diseñado para sitios web comerciales / corporativos, que incorpora tonos tierra y soporte para modo oscuro.
Componente de formulario de inicio de sesión
Un componente de formulario de inicio de sesión diseñado con Glassmorphism, con elementos translúcidos similares al vidrio esmerilado y efectos responsivos, que admite temas oscuros con Tailwind CSS.
Formulario de inicio de sesión skeuomórfico
Un componente de formulario de inicio de sesión esqueuomórfico con un esquema de color en escala de grises y complejidad compleja, diseñado para un sitio web de portafolio. Es responsivo y admite temas oscuros.