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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-bold text-white text-center mb-6">Create Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-400 mb-2" for="username">Username</label>
<input type="text" id="username" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your username" required />
</div>
<div class="mb-4">
<label class="block text-gray-400 mb-2" for="email">Email</label>
<input type="email" id="email" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-gray-400 mb-2" for="password">Password</label>
<input type="password" id="password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your password" required />
</div>
<div class="mb-6">
<label class="block text-gray-400 mb-2" for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Confirm your password" required />
</div>
<div class="flex items-center justify-between mb-4">
<input type="checkbox" id="terms" class="text-gray-400 border-gray-600" required />
<label for="terms" class="text-gray-400"> I agree to the terms and conditions</label>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg font-semibold">Register</button>
</form>
<p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
</div>
<footer class="absolute bottom-0 left-0 w-full text-center bg-gray-800 py-2 text-gray-400">© 2023 Company Name</footer>
</div>Composants associés
Composant du formulaire d’inscription
Un formulaire d’inscription réactif avec la conception Neumorphism, une palette de couleurs analogue et la prise en charge du mode sombre, construit avec Tailwind CSS à des fins de médias sociaux.
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
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.