Modulo di iscrizione
Un elegante componente del modulo di registrazione in modalità oscura che utilizza Tailwind CSS, con campi per le informazioni sull'utente e un design reattivo.
Codice HTML
<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>Componenti correlati
Componente del modulo di registrazione
Un modulo di registrazione reattivo con design del neumorfismo, combinazione di colori analoga e supporto per la modalità oscura, costruito con Tailwind CSS per scopi di social media.
Modulo di iscrizione
Un componente minimalista del modulo di registrazione con Tailwind CSS, che supporta la modalità oscura e le funzionalità di design reattivo.
modulo di registrazione-ecommerce-tailwind
Componente del modulo di registrazione dal design piatto minimalista per l'e-commerce che utilizza Tailwind CSS con supporto per la modalità reattiva e scura, con una combinazione di colori blu-arancione complementare.