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 composant de formulaire d’inscription simple et réactif avec des effets de néon/lueur, une palette de couleurs neutres froides et une prise en charge du mode sombre, adapté aux sites Web liés à la photographie.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif et visuellement attrayant conçu pour les outils CRM/Business, avec une palette de couleurs triadique et des micro-interactions subtiles, avec une prise en charge complète du mode sombre.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif avec un design skeuomorphe, une palette de couleurs sourdes et une prise en charge du mode sombre, adapté aux sites Web de voyage et de tourisme. Il imite des éléments du monde réel tels que des boutons en relief et des champs de saisie encastrés.