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à.
Codice HTML
<!-- Password Reset Card Container -->
<div class="max-w-md mx-auto my-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300">
<!-- Header with Icon -->
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600 dark:text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
</div>
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Reset Password</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Enter your email to receive a password reset link</p>
</div>
<!-- Form -->
<form class="space-y-4">
<!-- Email Input -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
</svg>
</div>
<input id="email" type="email" class="pl-10 w-full py-2 px-4 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:text-white transition-colors duration-200" placeholder="[email protected]" required>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="w-full py-2 px-4 bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white font-medium rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
Send Reset Link
</button>
<!-- Additional Info -->
<div class="text-center mt-4">
<p class="text-sm text-gray-600 dark:text-gray-400">
Remember your password?
<a href="#" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 font-medium transition-colors duration-200">
Sign in
</a>
</p>
</div>
</form>
<!-- Security Note -->
<div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>We'll send a secure link valid for 30 minutes</p>
</div>
</div>
</div>Componenti correlati
Componente di reimpostazione della password
Un componente reattivo per la reimpostazione della password con un'interfaccia utente in modalità scura, che utilizza una combinazione di colori analoga. Progettato per applicazioni di e-commerce.
Componente di reimpostazione della password
Un componente minimalista per la reimpostazione della password con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Reimpostazione della password pastello skeuomorfa
Un componente web reattivo per la reimpostazione della password progettato con un'estetica Skeuomorphism, caratterizzata da tenui colori pastello. L'interfaccia è complessa, con più elementi interattivi dettagliati attraverso effetti 3D, ombre e trame sottili create con Tailwind CSS. Include un modulo per l'inserimento di e-mail e un pulsante "Invia link di ripristino" ben visibile, insieme a collegamenti secondari. Il tema scuro è supportato. Ideale per vetrine portfolio.