Forgot Password Screen

This tailwind example is contributed by JUGENDRA GANGWAR, on 29-Sep-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form Other

Author JUGENDRA GANGWAR

Tailwind v3.4 7

Fork Fullscreen

<div class="min-h-screen bg-gradient-to-br from-slate-100 via-white to-indigo-100 flex items-center justify-center p-6">
  <div class="w-full max-w-md">
    <a href="#" class="mb-6 inline-flex items-center gap-2 text-sm font-medium text-slate-600 transition hover:text-slate-900">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
      </svg>
      Back to login
    </a>
    <div class="rounded-[28px] border border-white/70 bg-white/80 p-8 shadow-2xl backdrop-blur-xl">
      <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-3xl bg-indigo-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 12.5V7a2 2 0 0 0-2-2h-3.5L12 2 8.5 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6"/>
          <path stroke-linecap="round" stroke-linejoin="round" d="M16 19l2 2 4-4"/>
        </svg>
      </div>
      <div class="mt-6 text-center">
        <h1 class="text-3xl font-bold text-slate-900">Forgot Password?</h1>
        <p class="mt-3 text-sm leading-6 text-slate-500">
          No worries. Enter your email address and we'll send you a secure password reset link.
        </p>
      </div>
      <form class="mt-8 space-y-5">
        <div>
          <label class="mb-2 block text-sm font-medium text-slate-700">
            Email Address
          </label>
          <div class="relative">
            <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 7l9 6 9-6"/>
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7"/>
              </svg>
            </span>
            <input
              type="email"
              placeholder="john@example.com"
              class="w-full rounded-xl border border-slate-200 bg-white py-3 pl-11 pr-4 text-sm outline-none transition focus:border-indigo-500 focus:ring-4 focus:ring-indigo-100"
            >
          </div>
        </div>
        <button class="w-full rounded-xl bg-slate-900 py-3.5 text-sm font-semibold text-white shadow-lg shadow-slate-900/20 transition hover:bg-slate-800">
          Send Reset Link
        </button>
      </form>
      <div class="mt-6 rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
        <div class="flex items-start gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 3l8 4v5c0 5-3.5 9.5-8 11-4.5-1.5-8-6-8-11V7l8-4z"/>
            </svg>
          </div>
          <div>
            <h3 class="text-sm font-semibold text-emerald-900">Your account is protected</h3>
            <p class="mt-1 text-xs leading-5 text-emerald-700">
              We only send password reset links to verified email addresses.
            </p>
          </div>
        </div>
      </div>
      <p class="mt-8 text-center text-sm text-slate-500">
        Remember your password?
        <a href="#" class="font-semibold text-slate-900 hover:underline">
          Sign in
        </a>
      </p>
    </div>
  </div>
</div>

Related Examples

Login Form with Icon

Prashant

4 years ago

18.9k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.8k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

16k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

3 years ago

12.1k