Componente di reimpostazione della password
Componente di reimpostazione della password scheumorfica per i social media con combinazione di colori analoga e supporto per la modalità scura.
Codice HTML
<div class="min-h-screen py-6 flex flex-col justify-center sm:py-12 bg-gradient-to-br from-blue-100 via-blue-200 to-cyan-100 dark:from-gray-800 dark:via-gray-900 dark:to-black">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-cyan-500 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-800 dark:text-gray-100">Password Reset</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:text-lg sm:leading-7 dark:text-gray-200">
<p>Enter your email to receive a password reset link.</p>
<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-gray-100 dark:focus:border-blue-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-440 peer-placeholder-shown:top-2 transition-all dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Email Address</label>
</div>
<div class="relative">
<button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 shadow-md">Reset Password</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente di reimpostazione della password
Un semplice componente per la reimpostazione della password progettato utilizzando i principi di Material Design con una combinazione di colori in scala di grigi. È reattivo e supporta la modalità oscura.
Componente di reimpostazione della password
Un componente di reimpostazione della password ispirato al Material Design per piattaforme di social media creato con Tailwind CSS. Presenta una combinazione di colori vivaci con colori ad alta saturazione, layout pulito e design reattivo con supporto per la modalità oscura. Il componente include campi di input per l'e-mail, un pulsante di invio e testo utile. Il design utilizza principi di progettazione dei materiali come l'elevazione delle carte, il layout della griglia e gli effetti di profondità.
Componente di reimpostazione della password Brutalismo Cruscotto analogo complesso
Un componente di reimpostazione della password in stile brutalista per una dashboard, caratterizzato da un layout complesso, combinazione di colori analoga, reattività e supporto per la modalità oscura.