Componente de formulario de inicio de sesión
Formulario de inicio de sesión esqueuomórfico para redes sociales con colores pastel, responsivo y soporte para modo oscuro. El formulario presenta un sutil efecto 3D en las entradas y los botones, imitando elementos físicos. Las sombras y los degradados se utilizan para mejorar la sensación skeuomórfica. Las entradas tienen una sombra insertada suave y los botones tienen una apariencia elevada en la que se puede hacer clic. El esquema de color pastel pasa suavemente a una versión más oscura y apagada en el modo oscuro, manteniendo la legibilidad y la comodidad visual. El diseño responsivo garantiza la usabilidad en todos los dispositivos.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black p-4">
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-2xl w-full max-w-md
transform transition-all duration-300 ease-in-out
hover:shadow-3xl hover:-translate-y-1
ring-4 ring-indigo-300/50 dark:ring-gray-600/50
relative overflow-hidden">
<!-- Skeuomorphic "Glass" Effect Overlay -->
<div class="absolute inset-0 bg-white/20 dark:bg-gray-800/20 backdrop-blur-sm rounded-xl
transform -rotate-3 translate-x-2 translate-y-2 opacity-0 group-hover:opacity-100 transition duration-500 ease-in-out"></div>
<h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-8
drop-shadow-lg [text-shadow:0px_2px_4px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Welcome Back!
</h2>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
[text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Email
</label>
<div class="relative">
<input type="email" id="email" name="email" autocomplete="email"
class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
focus:ring-2 focus:ring-indigo-400 focus:border-transparent
transition duration-200 ease-in-out
[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
placeholder="[email protected]">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 10.49l7.997-4.606A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4.615-8-4.615V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
</div>
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2
[text-shadow:0px_1px_2px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Password
</label>
<div class="relative">
<input type="password" id="password" name="password" autocomplete="current-password"
class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-inner-lg
bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100
focus:ring-2 focus:ring-indigo-400 focus:border-transparent
transition duration-200 ease-in-out
[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.06),0px_1px_0px_rgba(255,255,255,0.8)]
dark:[box-shadow:inset_0px_2px_4px_rgba(0,0,0,0.6),0px_1px_0px_rgba(255,255,255,0.05)]"
placeholder="••••••••">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 016 0v2h-2V7a1 1 0 00-1-1zm-4 8h8v7H6v-7z"></path>
</svg>
</div>
</div>
</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-indigo-600 dark:text-indigo-400 rounded
focus:ring-indigo-500 dark:focus:ring-indigo-300
ring-offset-white dark:ring-offset-gray-700
border-gray-300 dark:border-gray-600
cursor-pointer
[box-shadow:0px_1px_2px_rgba(0,0,0,0.1)] dark:[box-shadow:0px_1px_2px_rgba(0,0,0,0.4)]">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-white/50 dark:shadow-gray-900/50">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Forgot your password?
</a>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg
text-lg font-semibold text-white
bg-gradient-to-r from-indigo-500 to-purple-500
hover:from-indigo-600 hover:to-purple-600
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-gray-300
transition duration-200 ease-in-out
transform active:scale-98 active:shadow-md
[box-shadow:0px_4px_8px_rgba(0,0,0,0.2),inset_0px_1px_0px_rgba(255,255,255,0.4)]
dark:[box-shadow:0px_4px_8px_rgba(0,0,0,0.6),inset_0px_1px_0px_rgba(255,255,255,0.1)]">
Sign In
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">
Don't have an account?
<a href="#" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300
[text-shadow:0px_1px_1px_var(--tw-shadow-color)] shadow-indigo-300/50 dark:shadow-purple-400/30">
Sign Up
</a>
</p>
</div>
</div>
</div>Componentes relacionados
Formulario de inicio de sesión Componente 37
Un componente de formulario de inicio de sesión responsivo diseñado en estilo Material Design con Tailwind CSS, compatible con el modo oscuro.
Formulario de inicio de sesión minimalista
Un formulario de inicio de sesión minimalista para sitios de comercio electrónico, con soporte para diseño responsivo y modo oscuro. Utiliza un esquema de color análogo. Sin JavaScript.
Formulario de inicio de sesión skeuomórfico
Un formulario de inicio de sesión responsivo con diseño de skeuomorfismo, combinación de colores monocromática y complejidad moderada, diseñado para plataformas de redes sociales. Incluye soporte para el modo oscuro usando Tailwind CSS.