Composant du formulaire d’inscription
Un composant de formulaire d’inscription minimaliste et réactif conçu avec Tailwind CSS, prenant en charge le mode sombre et présentant des espaces propres avec un minimum d’éléments.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md w-full">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 text-center">Create Account</h2>
<form class="mt-6 space-y-4">
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="name">Name</label>
<input type="text" id="name" name="name" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="Your Name">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
<input type="email" id="email" name="email" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="[email protected]">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
<input type="password" id="password" name="password" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="••••••••">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="avatar">Avatar</label>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border border-gray-300 dark:border-gray-600">
<input type="file" id="avatar" name="avatar" class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200">
</div>
</div>
<div class="mt-6">
<button type="submit" class="w-full py-2 px-4 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">Register</button>
</div>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">
Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login</a>
</p>
</div>
</div>Composants associés
formulaire-d-inscription-ecommerce-tailwind
Composant de formulaire d’inscription minimaliste pour le commerce électronique à l’aide de Tailwind CSS avec prise en charge du mode réactif et sombre, avec une palette de couleurs bleu-orange complémentaire.
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.
Formulaire d’inscription au neumorphisme
Composant du formulaire d’enregistrement de neumorphisme avec prise en charge du thème sombre à l’aide de Tailwind CSS