Componente di reimpostazione della password
Un componente di reimpostazione della password pulito e affidabile progettato per siti Web di notizie e media aziendali/professionali, con neutri caldi, reattività e supporto per la modalità oscura.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-200 dark:border-gray-700">
<div class="text-center mb-6 sm:mb-8">
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">Reset Your Password</h1>
<p class="text-sm text-gray-600 dark:text-gray-400">Enter your email address to receive a password reset link.</p>
</div>
<form>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 sm:text-sm text-gray-900 bg-gray-50">
</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-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-offset-gray-800">
Send Reset Link
</button>
</form>
<div class="mt-6 text-center text-sm">
<a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">
Remember your password? Log in
</a>
</div>
</div>
</div>Componenti correlati
Componente di reimpostazione della password
Un componente per la reimpostazione della password con Material Design, colori vivaci, complessità moderata e scopo di e-commerce. È reattivo e supporta il tema scuro utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
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
Un componente minimalista e reattivo per la reimpostazione della password con toni oceano/blu, progettato per le piattaforme di marketplace, incluso il supporto della modalità scura.