DocsAllOver Forgot Password Form in Tailwind CSS Snippets

Forgot Password Form in Tailwind CSS

Oct. 23, 2024

Tailwind, Responsive, Card, Clean UI, Form, Login Form, Ecommerce

Full Screen

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <main id="content" role="main" class="w-full  max-w-md mx-auto p-6">
        <div class="mt-7 bg-white  rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700 border-2 border-indigo-300">
          <div class="p-4 sm:p-7">
            <div class="text-center">
              <h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Forgot password?</h1>
              <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                Remember your password?
                <a class="text-blue-600 decoration-2 hover:underline font-medium" href="#">
                  Login here
                </a>
              </p>
            </div>
    
            <div class="mt-5">
              <form>
                <div class="grid gap-y-4">
                  <div>
                    <label for="email" class="block text-sm font-bold ml-1 mb-2 dark:text-white">Email address</label>
                    <div class="relative">
                      <input type="email" id="email" name="email" class="py-3 px-4 block w-full border-2 border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 shadow-sm" required aria-describedby="email-error">
                    </div>
                    <p class="hidden text-xs text-red-600 mt-2" id="email-error">Please include a valid email address so we can get back to you</p>
                  </div>
                  <button type="submit" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800">Reset password</button>
                </div>
              </form>
            </div>
          </div>
        </div>
    
        <p class="mt-3 flex justify-center items-center text-center divide-x divide-gray-300 dark:divide-gray-700">
          <a class="pr-3.5 inline-flex items-center gap-x-2 text-sm text-gray-600 decoration-2 hover:underline hover:text-blue-600 dark:text-gray-500 dark:hover:text-gray-200" href="#" target="_blank">
            <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
            </svg>
            View Github
          </a>
          <a class="pl-3 inline-flex items-center gap-x-2 text-sm text-gray-600 decoration-2 hover:underline hover:text-blue-600 dark:text-gray-500 dark:hover:text-gray-200" href="#">
            
            Contact us!
          </a>
        </p>
      </main>
</body>
</html>

/* Doesn't require any CSS. */

//Doesn't require any JS.

This Tailwind CSS snippet provides a visually appealing and user-friendly forgot password form designed to assist users who have forgotten their login credentials. The form is fully customizable, allowing you to tailor its appearance and behavior to match your website's design.

Key Features:

Responsive Design: The form adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the form using Tailwind CSS utility classes to match your website's design and branding.
Clear Input Labels: The input fields are accompanied by clear and concise labels, guiding users in entering their information.
Reset Password Button: A prominent button allows users to initiate the password reset process.
Links to Login and Contact Information: Provide links to the login page and contact information for additional options.

Implementation:

Include Tailwind CSS: Ensure you have Tailwind CSS installed and configured in your project.
Create the HTML Structure: Set up the basic HTML structure for the forgot password form, including the container, input fields, submit button, and links.
Apply Tailwind CSS Classes: Use Tailwind CSS utility classes to style the form and its elements, such as form, form-group, input, btn, and any other relevant classes.
Customize as Needed: Modify the Tailwind CSS classes and HTML structure to customize the appearance and behavior of the forgot password form according to your specific requirements.

Latest Snippets

View All