MatérielEarthToneLoginSignupComponent
Un composant de connexion et d’inscription réactif de style Material Design avec une palette de couleurs terre, une complexité modérée avec un basculement interactif entre les formulaires, conçu pour les tableaux de bord avec prise en charge du mode sombre.
HTML Code
<!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>Composants associés
Composant de connexion/inscription
Un composant de connexion/inscription réactif conçu dans le style Material Design avec prise en charge du thème sombre et palette de couleurs complémentaire, adapté aux interfaces de médias sociaux.
Composant de connexion/inscription
Un composant de connexion et d’inscription minimaliste utilisant Tailwind CSS, prenant en charge les effets réactifs et le thème sombre.
Composant de connexion/inscription
Un composant de connexion/inscription réactif conçu pour le mode sombre à l’aide de Tailwind CSS.