Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con microinterazioni e supporto per temi scuri, in stile CSS Tailwind.
Codice HTML
<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>Componenti correlati
Modulo di iscrizione Art Déco
Un componente del modulo di registrazione reattivo con un'estetica di design Art Déco, combinazione di colori ad alto contrasto e supporto per la modalità oscura, adatto per siti Web governativi o di servizio pubblico.
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo progettato in stile brutalista con una combinazione di colori pastello e adatto per siti Web aziendali/aziendali. È dotato di supporto per la modalità oscura utilizzando Tailwind CSS.
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con un'estetica di design 3D, che incorpora toni seppia/marrone, adatto per applicazioni di social media. Supporta la modalità oscura e utilizza l'HTML semantico per l'accessibilità.