Componente del modulo di registrazione
Un componente del modulo di registrazione minimalista e reattivo progettato con Tailwind CSS, che supporta la modalità oscura e presenta spazi puliti con elementi minimi.
Codice HTML
<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>Componenti correlati
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con microinterazioni e supporto per temi scuri, in stile CSS Tailwind.
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.
Modulo di registrazione per il brutalismo
Componente del modulo di registrazione con design brutalista, combinazione di colori triadica e complessità semplice, adatto per un cruscotto. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS.