Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con uno stile glassmorphism, una combinazione di colori del tono della terra e il supporto del tema scuro. Progettato per le piattaforme di social media, con un layout semplice ed elementi minimi. Utilizza Tailwind CSS per lo stile e include segnaposto di immagini di esempio.
Codice HTML
<div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans">
<div class="relative p-8 rounded-lg shadow-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg w-full max-w-md border border-gray-200 dark:border-gray-700">
<div class="absolute inset-0 -z-10 rounded-lg bg-gradient-to-br from-stone-300 to-stone-500 opacity-30 dark:from-stone-700 dark:to-stone-900"></div>
<h2 class="text-3xl font-bold text-center text-stone-800 dark:text-stone-100 mb-6">Register</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
</div>
<div class="mb-4">
<label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
</div>
<div class="mb-6">
<label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" class="w-full p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400 dark:focus:ring-stone-500 text-stone-800 dark:text-stone-100 placeholder-stone-600 dark:placeholder-stone-300">
</div>
<button type="submit" class="w-full bg-stone-600 dark:bg-stone-700 text-white p-3 rounded-lg font-semibold hover:bg-stone-700 dark:hover:bg-stone-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
Register
</button>
</form>
<p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
Already have an account? <a href="#" class="text-stone-800 dark:text-stone-200 font-semibold hover:underline">Login here</a>
</p>
</div>
</div>
Componenti correlati
Componente del modulo di registrazione
Un componente del modulo di registrazione reattivo con uno stile di design neumorfismo e una combinazione di colori neon/elettrico, che supporta la modalità oscura. Progettato per consulenze/servizi.
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 e visivamente accattivante progettato per CRM/Business Tools, caratterizzato da una combinazione di colori triadica e microinterazioni sottili, con supporto completo della modalità scura.