Html and tailwind css registration form code snippet

This registration form component is designed to provide a user-friendly interface for users to register for an account. Implemented using HTML and Tailwind CSS, the form is centered on the page and enclosed within a container with padding and a shadowed background for visual appeal. The form includes input fields for the user's name, email address, and password, each accompanied by a clear label for easy identification. A checkbox is provided for users to accept the terms and conditions. The submit button is styled with a blue background and white text to draw attention, and there's a link for users who already have an account to sign in. Overall, the form is designed for simplicity, clarity, and ease of use, enhancing the registration experience for users.

<div class="flex justify-center sm:p-4 lg:p-11 xl:p-20 2xl:p-52">
      <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">Register</h5>
        <form action="" class="text-start">
          <div class="grid grid-cols-1">
            <div class="mb-4">
              <label class="font-semibold" for="RegisterName">Your Name:</label>
              <input
                id="RegisterName"
                type="text"
                class="mt-3 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-blue-600 focus:ring-0"
                placeholder="your name"
              />
            </div>

            <div class="mb-4">
              <label class="font-semibold" for="LoginEmail"
                >Email Address:</label
              >
              <input
                id="LoginEmail"
                type="email"
                class="mt-3 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-blue-600 focus:ring-0"
                placeholder="name@example.com"
              />
            </div>

            <div class="mb-4">
              <label class="font-semibold" for="LoginPassword">Password:</label>
              <input
                id="LoginPassword"
                type="password"
                class="mt-3 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-blue-600 focus:ring-0"
                placeholder="Password:"
              />
            </div>

            <div class="mb-4">
              <div class="flex items-center w-full mb-0">
                <input
                  class="form-checkbox rounded border-gray-200 text-blue-600 focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50 me-2"
                  type="checkbox"
                  value=""
                  id="AcceptT&C"
                />
                <label class="form-check-label text-slate-400" for="AcceptT&C"
                  >I Accept
                  <a href="" class="text-blue-600"
                    >Terms And Condition</a
                  ></label
                >
              </div>
            </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-blue-600 hover:bg-indigo-700 border-blue-600 hover:border-indigo-700 text-white rounded-md w-full"
                value="Register"
              />
            </div>

            <div class="text-center">
              <span class="text-slate-400 me-2"
                >Already have an account ?
              </span>
              <a href="#" class="text-black font-bold inline-block">Sign in</a>
            </div>
          </div>
        </form>
      </div>
    </div>

Categories

Html and tailwind css registration form code snippet