Componente di reimpostazione della password
Un complesso componente per la reimpostazione della password progettato per la pubblica amministrazione/i servizi pubblici, caratterizzato da un design pulito e minimalista basato sulla tipografia con colori ad alto contrasto e piena reattività, incluso il supporto della modalità scura.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans transition-colors duration-200">
<div class="sm:mx-auto sm:w-full sm:max-w-md">
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight tracking-tight sm:text-4xl">
Reset Your Password
</h2>
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400 max-w-sm mx-auto">
Enter your email address below to receive a password reset link.
</p>
</div>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-lg rounded-lg sm:px-10 border border-gray-200 dark:border-gray-700">
<form class="space-y-6" action="#" method="POST">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Email address
</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input id="email" name="email" type="email" autocomplete="email" required
class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 pr-10">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M2.5 7A.5.5 0 013 6.5h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V7zm0 4.5A.5.5 0 013 11h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-1.5z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM4.5 5.5a.5.5 0 00-.5.5v9a.5.5 0 00.5.5h11a.5.5 0 00.5-.5v-9a.5.5 0 00-.5-.5h-11z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
Send reset link
</button>
</div>
</form>
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
Or
</span>
</div>
</div>
<div class="mt-6 space-y-4">
<a href="#" class="w-full flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
<svg class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM6.75 9.25a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" />
</svg>
Back to Login
</a>
<a href="#" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50 hover:bg-blue-100 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
<svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 10h-1.26A8 8 0 1010 4.09"></path>
<path d="M20.25 7.5l-2.75-2.75L15 7.5"></path>
</svg>
Contact Support
</a>
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Componente di reimpostazione della password
Un componente minimalista per la reimpostazione della password con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Componente di reimpostazione della password
Un componente reattivo per la reimpostazione della password con un design "ispirato alla carta/stampa", "colori caramelle/dolci" e supporto per la modalità scura, adatto per aziende industriali e manifatturiere.
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.