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
Monospace_Dating_Login_Signup_Component
Un composant de connexion/inscription simple et réactif pour les plateformes de rencontres/sociales avec un design monospace inspiré du code. Dispose d’un monochrome noir et blanc avec une couleur d’accent vive et d’une prise en charge complète du mode sombre.
Composant de connexion/inscription
Un composant de connexion/inscription au design minimaliste et plat avec des effets réactifs et une prise en charge du thème sombre, utilisant Tailwind CSS.
Composant de connexion/inscription
Composant complexe de connexion/inscription conçu avec un style skeuomorphe, utilisant un schéma de couleurs en niveaux de gris pour une interface de tableau de bord. Il comprend divers éléments interactifs et est réactif avec la prise en charge du thème sombre.