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.
Código HTML
<!DOCTYPE html>
<html lang='en' class='h-full bg-amber-50 dark:bg-gray-900'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>Login / Signup Component</title>
<script src='https://cdn.tailwindcss.com'></script>
</head>
<body class='min-h-screen bg-amber-50 dark:bg-gray-900 flex items-center justify-center p-4'>
<div class='max-w-4xl w-full bg-stone-50 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2'>
<div class='hidden md:block'>
<img src='https://picsum.photos/id/1018/800/800' alt='Dashboard Illustration' class='object-cover w-full h-full' />
</div>
<div class='p-8'>
<input id='tabToggle' type='checkbox' class='peer sr-only' />
<div class='flex justify-center mb-6 space-x-4'>
<label for='tabToggle' class='cursor-pointer text-lg font-medium text-amber-700 peer-checked:text-stone-500 transition'>Login</label>
<label for='tabToggle' class='cursor-pointer text-lg font-medium text-stone-500 peer-checked:text-amber-700 transition'>Signup</label>
</div>
<form class='space-y-4 transition-all duration-300 ease-in peer-checked:hidden'>
<div>
<label for='loginEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
<input id='loginEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div>
<label for='loginPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
<input id='loginPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Login</button>
</form>
<form class='space-y-4 transition-all duration-300 ease-in hidden peer-checked:block'>
<div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<div>
<label for='firstName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>First Name</label>
<input id='firstName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div>
<label for='lastName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Last Name</label>
<input id='lastName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
</div>
<div>
<label for='signupEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
<input id='signupEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<div>
<label for='signupPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
<input id='signupPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div>
<label for='confirmPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Confirm Password</label>
<input id='confirmPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
</div>
<button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Sign Up</button>
</form>
</div>
</div>
</body>
</html>Componentes relacionados
Componente de inicio de sesión/registro
Un componente responsivo de inicio de sesión/registro diseñado para el modo oscuro utilizando Tailwind CSS.
Componente de inicio de sesión/registro
Un componente complejo de inicio de sesión/registro que utiliza principios de Material Design y un esquema de color monocromático para sitios web comerciales y corporativos con soporte de temas oscuros.
Brutalismo Componente de inicio de sesión/registro
Un componente de inicio de sesión/registro de estilo brutalista con una combinación de colores triádica, complejidad media, diseño receptivo y compatibilidad con el modo oscuro. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.