Componente del modulo di registrazione
Un componente del modulo di registrazione con design del neumorfismo, combinazione di colori in scala di grigi, complessità moderata e supporto del tema scuro reattivo utilizzando Tailwind CSS.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<div class="absolute inset-0 bg-gradient-to-r from-gray-300 to-gray-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
<div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
<div class="max-w-md mx-auto">
<div>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Register</h1>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:opacity-100 dark:text-gray-300">
<div class="relative">
<input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Email address" />
<label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
</div>
<div class="relative">
<input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Password" />
<label for="password" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Password</label>
</div>
<div class="relative">
<button class="bg-gray-500 text-white rounded-md px-2 py-1 dark:bg-gray-700">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
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.
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.
Componente del modulo di registrazione
Un componente del modulo di registrazione semplice e reattivo con effetti neon/bagliore, combinazione di colori neutri freddi e supporto per la modalità scura, adatto per siti Web relativi alla fotografia.