Composant du formulaire d’inscription
Un composant de formulaire d’inscription avec une conception Neumorphism, une palette de couleurs en niveaux de gris, une complexité modérée et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<div class="absolute inset-0 bg-gradient-to-r from-gray-300 to-gray-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
<div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
<div class="max-w-md mx-auto">
<div>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Register</h1>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:opacity-100 dark:text-gray-300">
<div class="relative">
<input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Email address" />
<label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
</div>
<div class="relative">
<input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Password" />
<label for="password" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Password</label>
</div>
<div class="relative">
<button class="bg-gray-500 text-white rounded-md px-2 py-1 dark:bg-gray-700">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif avec une esthétique de conception 3D, incorporant des tons sépia/bruns, adapté aux applications de médias sociaux. Il prend en charge le mode sombre et utilise le HTML sémantique pour l’accessibilité.
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.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription complexe et réactif pour les applications financières/bancaires, doté d’un design épuré et minimaliste avec des couleurs très contrastées, une typographie forte et une mise en page basée sur une grille. Inclut la prise en charge du mode sombre.