Tailwind UI Pattern Registry for humans and agents

auth forgot-password reset form minimal minimal

Auth Forgot Password

Minimal centered password reset page with email input, success state, and back-to-login navigation.

minimal Responsive
Live Preview

Sections

lock-iconreset-formsuccess-stateback-link

Patterns used

auth/base
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Reset Password — Acme</title>
  <meta name="description" content="Reset your password by entering your email address." />
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
  <link rel="stylesheet" href="https://webspire.de/webspire-components.css">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    body { font-family: 'Inter', sans-serif; }

    /* Brand tokens */
    :root {
      --ws-color-accent: oklch(0.5 0.22 272);
      --ws-color-accent-light: oklch(0.58 0.18 272);
      --ws-color-accent-dark: oklch(0.44 0.24 272);
      --ws-color-accent-bg: oklch(0.96 0.04 272);
    }
  </style>
</head>
<body class="min-h-screen bg-slate-50 antialiased">

  <!-- Top Navigation Bar -->
  <nav class="ws-navbar border-b border-slate-100 bg-white/60 backdrop-blur-sm" aria-label="Main navigation">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-14">
      <a href="#" class="flex items-center gap-2">
        <svg class="w-8 h-8" viewBox="0 0 40 40" fill="none" aria-hidden="true">
          <rect width="40" height="40" rx="10" style="fill: var(--ws-color-accent);" />
          <path d="M12 14h16M12 20h10M12 26h13" stroke="white" stroke-width="2.5" stroke-linecap="round" />
        </svg>
        <span class="text-lg font-bold text-slate-900">Acme</span>
      </a>
      <a href="#" class="text-sm font-medium text-slate-500 hover:text-slate-700 transition-colors">Help Center</a>
    </div>
  </nav>

  <div class="min-h-[calc(100vh-56px)] flex items-center justify-center p-4 sm:p-8">
    <div class="ws-auth w-full max-w-md text-center">

      <!-- Lock Icon -->
      <div class="mx-auto w-16 h-16 rounded-2xl flex items-center justify-center mb-6" style="background: var(--ws-color-accent-bg);">
        <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" style="color: var(--ws-color-accent);">
          <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
        </svg>
      </div>

      <h1 class="text-2xl font-bold text-slate-900">Reset your password</h1>
      <p class="mt-3 text-slate-500 leading-relaxed max-w-sm mx-auto">
        Enter the email address associated with your account and we'll send you a link to reset your password.
      </p>

      <!-- Form Card -->
      <div class="mt-8 bg-white rounded-2xl shadow-lg shadow-slate-200/50 border border-slate-100 p-8" id="reset-form">
        <form class="ws-forms space-y-5" action="#" method="POST">
          <div class="text-left">
            <label for="email" class="block text-sm font-medium text-slate-700 mb-1.5">Email address</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                <svg class="w-5 h-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                </svg>
              </div>
              <input type="email" id="email" name="email" autocomplete="email" required
                class="w-full pl-12 pr-4 py-3 rounded-xl border border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:border-transparent transition"
                placeholder="you@example.com" />
            </div>
          </div>
          <button type="submit"
            class="w-full py-3 px-4 rounded-xl text-white font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2 transition shadow-sm"
            style="background: var(--ws-color-accent);">
            Send reset link
          </button>
        </form>

        <!-- Info Notice -->
        <div class="mt-5 flex items-start gap-3 p-4 rounded-xl bg-slate-50 text-left">
          <svg class="w-5 h-5 text-slate-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
          </svg>
          <p class="text-sm text-slate-500 leading-relaxed">
            If an account exists with this email, you'll receive a password reset link within a few minutes.
          </p>
        </div>
      </div>

      <!-- Success State (hidden by default, shown after form submission) -->
      <div class="mt-8 bg-white rounded-2xl shadow-lg shadow-slate-200/50 border border-slate-100 p-8 hidden" id="success-state">
        <!-- Email Icon -->
        <div class="mx-auto w-14 h-14 rounded-full bg-emerald-50 flex items-center justify-center mb-5">
          <svg class="w-7 h-7 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
          </svg>
        </div>
        <h2 class="text-xl font-bold text-slate-900 mb-2">Check your email</h2>
        <p class="text-slate-500 leading-relaxed mb-4">
          We've sent a password reset link to <strong class="text-slate-700">your email address</strong>. The link will expire in 60 minutes.
        </p>

        <!-- Steps -->
        <div class="text-left space-y-3 p-4 rounded-xl bg-slate-50 mb-5">
          <div class="flex items-center gap-3">
            <div class="w-6 h-6 rounded-full text-xs font-semibold flex items-center justify-center shrink-0" style="background: var(--ws-color-accent-bg); color: var(--ws-color-accent);">1</div>
            <span class="text-sm text-slate-600">Open the email from Acme</span>
          </div>
          <div class="flex items-center gap-3">
            <div class="w-6 h-6 rounded-full text-xs font-semibold flex items-center justify-center shrink-0" style="background: var(--ws-color-accent-bg); color: var(--ws-color-accent);">2</div>
            <span class="text-sm text-slate-600">Click the "Reset Password" button</span>
          </div>
          <div class="flex items-center gap-3">
            <div class="w-6 h-6 rounded-full text-xs font-semibold flex items-center justify-center shrink-0" style="background: var(--ws-color-accent-bg); color: var(--ws-color-accent);">3</div>
            <span class="text-sm text-slate-600">Choose a new secure password</span>
          </div>
        </div>

        <p class="text-sm text-slate-400">
          Didn't receive the email? Check your spam folder or
          <button type="button" class="font-medium transition-colors" style="color: var(--ws-color-accent);">resend</button>.
        </p>
      </div>

      <!-- Back to Login -->
      <a href="#" class="inline-flex items-center gap-2 mt-8 text-sm font-medium text-slate-500 transition-colors" style="--hover-color: var(--ws-color-accent);" onmouseover="this.style.color='var(--ws-color-accent)'" onmouseout="this.style.color=''">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
        </svg>
        Back to login
      </a>

      <!-- Help Section -->
      <div class="mt-16 border-t border-slate-200 pt-8">
        <h3 class="text-sm font-semibold text-slate-900 mb-4">Other ways to get help</h3>
        <div class="grid grid-cols-2 gap-4">
          <a href="#" class="p-4 rounded-xl bg-white border border-slate-200 transition text-left group hover:border-[oklch(0.78_0.12_272)]" style="">
            <svg class="w-6 h-6 text-slate-400 group-hover:text-[oklch(0.5_0.22_272)] transition mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
            </svg>
            <p class="text-sm font-medium text-slate-700 group-hover:text-[oklch(0.44_0.24_272)] transition">Help Center</p>
            <p class="text-xs text-slate-400 mt-0.5">Browse FAQs and guides</p>
          </a>
          <a href="mailto:support@acme.com" class="p-4 rounded-xl bg-white border border-slate-200 transition text-left group hover:border-[oklch(0.78_0.12_272)]">
            <svg class="w-6 h-6 text-slate-400 group-hover:text-[oklch(0.5_0.22_272)] transition mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
            </svg>
            <p class="text-sm font-medium text-slate-700 group-hover:text-[oklch(0.44_0.24_272)] transition">Email Support</p>
            <p class="text-xs text-slate-400 mt-0.5">support@acme.com</p>
          </a>
          <a href="#" class="p-4 rounded-xl bg-white border border-slate-200 transition text-left group hover:border-[oklch(0.78_0.12_272)]">
            <svg class="w-6 h-6 text-slate-400 group-hover:text-[oklch(0.5_0.22_272)] transition mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
            </svg>
            <p class="text-sm font-medium text-slate-700 group-hover:text-[oklch(0.44_0.24_272)] transition">Live Chat</p>
            <p class="text-xs text-slate-400 mt-0.5">Mon-Fri 9am-6pm EST</p>
          </a>
          <a href="#" class="p-4 rounded-xl bg-white border border-slate-200 transition text-left group hover:border-[oklch(0.78_0.12_272)]">
            <svg class="w-6 h-6 text-slate-400 group-hover:text-[oklch(0.5_0.22_272)] transition mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
            </svg>
            <p class="text-sm font-medium text-slate-700 group-hover:text-[oklch(0.44_0.24_272)] transition">FAQ</p>
            <p class="text-xs text-slate-400 mt-0.5">Common account questions</p>
          </a>
        </div>
      </div>

      <!-- Security Notice -->
      <div class="mt-8 flex items-start gap-3 p-4 rounded-xl bg-slate-50 border border-slate-100 text-left max-w-sm mx-auto">
        <svg class="w-5 h-5 text-slate-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
        </svg>
        <div>
          <p class="text-sm font-medium text-slate-700">Security tip</p>
          <p class="text-xs text-slate-500 mt-1 leading-relaxed">We will never ask you for your password via email. If you receive a suspicious email, please report it to our security team immediately.</p>
        </div>
      </div>

      <!-- Password Best Practices -->
      <div class="mt-6 flex items-start gap-3 p-4 rounded-xl border text-left max-w-sm mx-auto" style="background: var(--ws-color-accent-bg); border-color: oklch(0.88 0.08 272);">
        <svg class="w-5 h-5 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" style="color: var(--ws-color-accent);">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
        </svg>
        <div>
          <p class="text-sm font-medium" style="color: var(--ws-color-accent-dark);">When choosing a new password</p>
          <ul class="text-xs mt-1.5 space-y-1 leading-relaxed" style="color: oklch(0.44 0.18 272 / 0.8);">
            <li>Use at least 12 characters with mixed case</li>
            <li>Include numbers and special characters</li>
            <li>Avoid reusing passwords from other sites</li>
            <li>Consider using a password manager</li>
            <li>Enable two-factor authentication for extra security</li>
            <li>Change your password regularly (every 90 days)</li>
          </ul>
        </div>
      </div>

      <!-- Footer -->
      <p class="mt-8 text-xs text-slate-400">
        &copy; 2026 Acme Inc. All rights reserved.
        <span class="mx-1">&middot;</span>
        <a href="#" class="hover:text-slate-600 transition-colors">Privacy</a>
        <span class="mx-1">&middot;</span>
        <a href="#" class="hover:text-slate-600 transition-colors">Terms</a>
      </p>

    </div>
  </div>

</body>
</html>

Clean, minimal password reset page with a lock icon, single email input, and a hidden success state for post-submission feedback. Includes a back-to-login link and support contact.