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.
Codice HTML
<div class="min-h-screen flex items-center justify-center p-4 bg-blue-50 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-6 border border-blue-100 dark:border-gray-700 transition-all duration-300 transform md:scale-105 lg:scale-100 xl:scale-95">
<div class="text-center">
<h1 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-2">Reset Your Password</h1>
<p class="text-gray-600 dark:text-gray-400 text-sm">Enter your new password below.</p>
</div>
<form class="space-y-6">
<div>
<label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
<input type="password" id="new-password" name="new-password" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
</div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold 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 transition-colors duration-200">
Reset Password
</button>
</form>
<div class="text-center text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">Back to sign in</a>
</div>
</div>
</div>
Componenti correlati
Componente di reimpostazione della password
Componente di reimpostazione della password con stile neumorfismo, combinazione di colori complementari, complessità complessa, per scopi di social media, utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri.
Componente di reimpostazione della password
Un componente reattivo per la reimpostazione della password con design del neumorfismo, supporto per la modalità oscura e nessun JavaScript.
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.