Tailwind CSS Forgot Password Forms

Explore various styles of "Forgot Password" forms crafted with Tailwind CSS. These components provide clean, responsive solutions for user password recovery flows.

Each example includes a preview and the corresponding HTML code. Use the "Copy" button to easily grab the code for your projects. Customize the Tailwind utility classes to match your application's design system.

Simple Centered Form

Forgot Password?

Enter the email address associated with your account, and we'll send you a link to reset your password.

Remember your password? Sign in

<!-- Simple Centered Forgot Password Form -->
<div class="flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
  <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 mb-6">Forgot Password?</h2>
    <p class="text-center text-gray-600 text-sm mb-6">
      Enter the email address associated with your account, and we'll send you a link to reset your password.
    </p>
    <form action="#" method="POST">
      <div class="mb-4">
        <label for="email_simple" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
        <input type="email" id="email_simple" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="you@example.com">
      </div>
      <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
        Send Reset Link
      </button>
    </form>
    <p class="text-center text-sm text-gray-500 mt-6">
      Remember your password? <a href="#" class="text-blue-600 hover:underline">Sign in</a>
    </p>
  </div>
</div>

Card Layout Form

Password Recovery

Enter your email to receive recovery instructions

Back to Login

<!-- Card Layout Forgot Password Form -->
<div class="max-w-lg mx-auto my-10 bg-white rounded-lg shadow-xl p-8">
  <h2 class="text-2xl font-semibold text-gray-700 text-center mb-1">Password Recovery</h2>
  <p class="text-gray-600 text-center mb-6 text-sm">Enter your email to receive recovery instructions</p>

  <form action="#" method="POST">
    <div class="mb-6">
      <label for="email_card" class="block mb-2 text-sm font-medium text-gray-900">Your email</label>
      <input type="email" id="email_card" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="name@company.com" required />
    </div>

    <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 w-full focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
      Send Instructions
    </button>
  </form>

  <div class="mt-6 text-center">
    <a href="#" class="text-sm text-blue-600 hover:underline">Back to Login</a>
  </div>
</div>

Form with Illustration

Locked out?

No problem! Enter your email below and we'll send you instructions to reset your password.

Return to Sign In

<!-- Forgot Password Form with Illustration -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
  <div class="flex flex-col md:flex-row items-center">
    <!-- Form Section -->
    <div class="w-full md:w-1/2 p-6 md:p-10">
      <h2 class="text-2xl font-bold text-gray-800 mb-4">Locked out?</h2>
      <p class="text-gray-600 mb-6">
        No problem! Enter your email below and we'll send you instructions to reset your password.
      </p>
      <form action="#" method="POST">
        <div class="mb-4">
          <label for="email_illustration" class="sr-only">Email Address</label>
          <input type="email" id="email_illustration" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Enter your email address">
        </div>
        <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200">
          Reset Password
        </button>
      </form>
      <p class="text-sm text-gray-500 mt-4">
        <a href="#" class="hover:underline text-indigo-600">Return to Sign In</a>
      </p>
    </div>

    <!-- Illustration Section (Hidden on small screens) -->
    <div class="w-full md:w-1/2 hidden md:flex justify-center items-center p-6 bg-gray-50">
       <!-- Adjust image size and source as needed -->
      <img src="https://picsum.photos/350/350" alt="Password Recovery Illustration" class="rounded-lg object-cover max-w-xs lg:max-w-sm">
    </div>
  </div>
</div>

Form with Logo

WPDean

Forgot Your Password?

Let's get you back into your account. Enter your email below.

Back to login

<!-- Forgot Password Form with Logo -->
<div class="flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
  <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
    <div class="text-center mb-8">
      <!-- Replace with your actual logo -->
      <div class="text-3xl font-bold text-blue-600">WPDean</div>
    </div>
    <h2 class="text-xl font-semibold text-center text-gray-700 mb-2">Forgot Your Password?</h2>
    <p class="text-center text-gray-500 text-sm mb-6">
      Let's get you back into your account. Enter your email below.
    </p>
    <form action="#" method="POST">
      <div class="mb-5">
        <label for="email_logo" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
        <input type="email" id="email_logo" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="you@example.com">
      </div>
      <button type="submit" class="w-full bg-blue-600 text-white py-2.5 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150">
        Send Password Reset Email
      </button>
    </form>
    <div class="text-center mt-6">
      <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">
        Back to login
      </a>
    </div>
  </div>
</div>

FAQ on Tailwind CSS Forgot Password Forms

How do I create a basic forgot password form using Tailwind CSS?

Create an HTML form with appropriate input fields and buttons. Apply Tailwind utility classes for styling. Include form validation using JavaScript or a framework like React.js or Vue.js. Focus on responsive design by using Tailwind's responsive breakpoints for mobile-friendly interfaces. Remember to implement proper form validation errors and security protocols.

What are the best practices for styling password reset forms with Tailwind?

Keep it minimal with clean form interface design patterns. Use consistent utility classes for inputs, buttons, and error messages. Consider form accessibility by adding proper contrasts and focus states. Implement dark mode forms for better user experience. Adam Wathan recommends using component libraries when building complex authentication flows.

Can I integrate Tailwind CSS forgot password forms with JavaScript frameworks?

Yes. Tailwind works seamlessly with React, Vue.js, Alpine.js, and other JavaScript frameworks. Create reusable form components that handle state management. Many frontend developers combine Tailwind with Next.js or Laravel for complete authentication systems. Form libraries often provide pre-built components compatible with Tailwind's utility-first CSS approach.

How do I handle form validation in Tailwind password recovery forms?

Implement client-side validation using JavaScript or framework-specific validation libraries. Style error messages consistently with utility classes. Show validation errors near relevant input fields. Consider server-side validation for security. The authentication flow should guide users through the password reset workflow with clear feedback.

What components should a complete password reset system include?

A complete system needs:

Email input form
Password reset token verification
New password creation form
Success confirmation page
Error handling components

All elements should maintain consistent UI components and form layout across authentication screens.

How can I make my forgot password form more secure?

Implement HTTPS for secure form submission. Use proper password reset token with expiration. Consider two-factor authentication options. Never store plaintext passwords in your user accounts database. Follow security protocols like CSRF protection. Modern form design should balance security with usability across web browsers.

How do I customize the default Tailwind styles for form elements?

Extend Tailwind's configuration in the tailwind.config.js file. Create custom styling when needed or use @apply to compose utility classes. Many UI kits provide ready-made components. The npm package includes documentation on customization. GitHub repositories often contain examples of custom styling for authentication pages.

What's the best way to handle responsive design for password reset forms?

Use Tailwind's responsive breakpoints (sm, md, lg, xl) to adjust layout based on screen size. Create mobile-first designs that scale up. Test on various mobile devices and web browsers. Consider single-column layouts for small screens and expanded layouts for desktop. Prioritize form accessibility across all devices.

How do I connect a Tailwind CSS form to a backend password reset system?

Use fetch API or axios to connect your form to backend endpoints. Handle form submission events properly. Implement loading states during API calls. Ensure proper error handling for network issues. The authentication system should securely process the reset request and generate password reset links for email verification.

What common mistakes should I avoid when building password reset interfaces?

Avoid overcomplicated designs that confuse users. Don't skip form validation or error messages. Never expose sensitive information in URLs. Don't forget to implement proper account recovery processes. Many web applications fail to consider browser compatibility issues. Keep your form templates simple but complete for the best user interface patterns.