Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif avec des micro-interactions et la prise en charge du thème sombre, stylisé avec Tailwind CSS.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8 w-11/12 max-w-md">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Create an Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="name">Full Name</label>
<input type="text" id="name" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email Address</label>
<input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
<input type="password" id="password" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition duration-200" placeholder="********" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="avatar">Profile Picture</label>
<div class="flex items-center mb-2">
<img id="avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 mr-3">
<input type="file" class="bg-gray-200 dark:bg-gray-700 rounded p-2 dark:border-gray-700" accept="image/*">
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">Upload a profile picture (optional)</div>
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 rounded transition duration-200">Register</button>
</form>
</div>
</div>Composants associés
Composant du formulaire d’inscription
Un formulaire d’inscription minimaliste avec une palette de couleurs en niveaux de gris et des éléments interactifs riches, réactif et incluant la prise en charge du mode sombre à l’aide de Tailwind CSS.
Formulaire d’inscription
Un composant de formulaire d’inscription minimaliste doté de Tailwind CSS, prenant en charge le mode sombre et les fonctionnalités de conception réactive.
Formulaire d’inscription
Un composant élégant de formulaire d’inscription en mode sombre utilisant Tailwind CSS, avec des champs pour les informations sur l’utilisateur et un design réactif.