Html and Tailwind CSS Password Reset Form code snippet

Html and Tailwind CSS Password Reset Form code snippet | component

This reset password form component is designed to guide users through the process of resetting their password in a simple and efficient manner. Utilizing HTML and Tailwind CSS, the form code snippet is enclosed within a container with padding and a shadowed background, providing a clean and visually appealing interface. The form component begins with a brief message informing users of the process, followed by fields for users to input their email address. The submit button is prominently displayed with an indigo background color and white text, drawing attention to the action of sending the reset link. Additionally, there's a link provided for users to sign in if they remember their password, offering an alternative option for accessing their account. Overall, the design prioritizes clarity and ease of use, ensuring a smooth experience for users resetting their passwords.

<div class="sm:p-4 lg:p-11 xl:p-20 2xl:p-52 relative">
      <div class="flex justify-center">
        <div
          class="max-w-[400px] w-full m-auto p-6 bg-white shadow-md rounded-md"
        >
          <a href="#"
            ><img
              src="https://res.cloudinary.com/djunzsydj/image/upload/v1711398231/reallygreatsite.com_3_jocaxo.png"
              class="mx-auto"
              alt=""
          /></a>
          <h5 class="my-6 text-xl font-semibold">Reset Your Password</h5>
          <div class="grid grid-cols-1">
            <p class="text-slate-400 mb-6">
              Please enter your email address. You will receive a link to create
              a new password via email.
            </p>
            <form class="text-start">
              <div class="grid grid-cols-1">
                <div class="mb-4">
                  <label class="font-semibold" for="LoginEmail"
                    >Email Address:</label
                  >
                  <input
                    id="LoginEmail"
                    type="email"
                    class="form-input mt-3 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600 focus:ring-0"
                    placeholder="name@example.com"
                  />
                </div>

                <div class="mb-4">
                  <input
                    type="submit"
                    class="py-2 px-5 inline-block tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md w-full"
                    value="Send"
                  />
                </div>

                <div class="text-center">
                  <span class="text-slate-400 me-2"
                    >Remember your password ? </span
                  ><a href="#" class="text-black font-bold inline-block"
                    >Sign in</a
                  >
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

Categories

Html and Tailwind CSS Password Reset Form code snippet | component