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
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.
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 reattivo con un design glassmorphism, una combinazione di colori in scala di grigi e un supporto per temi scuri, adatto per siti Web aziendali/aziendali.