Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif conçu avec un style neumorphique utilisant des couleurs sourdes/désaturées, adapté à un environnement de tableau de bord. Il inclut la prise en charge du mode sombre et utilise des ombres subtiles pour créer un effet extrudé.
HTML Code
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-800 transition-colors duration-300">
<div class="w-full max-w-md p-8 rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-700 bg-gray-200
dark:border dark:border-gray-600
[box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-6 text-center">Register Account</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
[box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Username field">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
[box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Email field">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Password</label>
<input type="password" id="password" name="password" placeholder="Minimum 8 characters" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
[box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Password field">
</div>
<button type="submit" class="w-full p-3 rounded-lg font-semibold text-white
bg-blue-500 hover:bg-blue-600 active:bg-blue-700
shadow-md hover:shadow-lg dark:shadow-md dark:hover:shadow-lg
[box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2
dark:focus:ring-offset-gray-700 transition-all duration-200"
aria-label="Register button">
Register
</button>
<p class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium" aria-label="Login link">Login here</a>
</p>
</form>
</div>
</div>Composants associés
Composant du formulaire d’inscription
Un formulaire d’inscription minimaliste au design plat avec des effets réactifs et une prise en charge du thème sombre, à l’aide de Tailwind CSS.
Formulaire d’inscription Skeuomorphic
Formulaire d’inscription skeuomorphe avec palette de couleurs monochromatiques, conçu pour une utilisation professionnelle/d’entreprise avec prise en charge du mode sombre et réactivité à l’aide de Tailwind CSS. Pas de JavaScript.
Composant du formulaire d’inscription
Un formulaire d’inscription simple avec un design pastel 3D, réactif et avec prise en charge du mode sombre. Convient pour un blog ou un site de consommation de contenu.