Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo progettato con uno stile scheumorfico, utilizzando una combinazione di colori monocromatica e su misura per le esperienze di e-commerce. Supporta la modalità oscura e include funzioni di input interattive per la registrazione dell'utente.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-gray-800">
<div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg p-8 w-full max-w-lg">
<h2 class="text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6 text-center">Create Your Account</h2>
<div class="flex justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-24 h-24 border-2 border-gray-500 dark:border-gray-600 shadow-lg">
</div>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
<input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your username" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your email" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your password" required>
</div>
<div class="flex items-center justify-between mb-4">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400">
<span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
</label>
</div>
<button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 dark:bg-gray-400 dark:hover:bg-gray-300 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">
Already have an account? <a href="#" class="text-gray-800 dark:text-gray-200 font-medium">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 registrazione per lo scheumorfismo Scala di grigi
Un componente del modulo di registrazione scheumorfico in scala di grigi per portfolio, con complessità moderata, design reattivo e supporto per temi scuri, senza Javascript. Immagini da picsum.photos e randomuser.me utilizzate.
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura, che supporta la modalità oscura e la visualizzazione di immagini segnaposto.