Published on

10 Tailwind Login Form Components

10 Tailwind Login Form Components

10 Tailwind Login Form Components

Tailwind: Login Form Components

Sure! Here are ten different Tailwind login form components that you can use as templates:

1. Default Login form

Forgot Password?

<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="username">
      Username
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
  </div>
  <div class="mb-6">
    <label class="block text-gray-700 font-bold mb-2" for="password">
      Password
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********">
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
      Forgot Password?
    </a>
  </div>
</form>

2. Minimal Login form

<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="username">
      Username
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="password">
      Password
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********">
  </div>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
    Sign In
  </button>
</form>

3. Login Form with Background Imageform

background-image
<div class="bg-gray-200 h-screen w-screen flex flex-col justify-center items-center relative">
  <div class="bg-white rounded-lg p-8 shadow-lg z-10">
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 font-semibold mb-2" for="username">
          Username
        </label>
        <input class="appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="username" type="text" placeholder="Username">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-semibold mb-2" for="password">
          Password
        </label>
        <input class="appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="password" type="password" placeholder="********">
      </div>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
    </form>
  </div>
  <img src="https://source.unsplash.com/random/800x600" alt="background-image" class="absolute object-cover h-full w-full z-0">
</div>

4. Login Form with Social Media Buttonsform

Or sign in with

<div class="bg-gray-200 h-screen w-screen flex flex-col justify-center items-center">
  <div class="bg-white rounded-lg p-8 shadow-lg max-w-md">
    <form>
      <div class="mb-4">
        <label class="block text-gray-700 font-semibold mb-2" for="username">
          Username
        </label>
        <input class="appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="username" type="text" placeholder="Username">
      </div>
      <div class="mb-4">
        <label class="block text-gray-700 font-semibold mb-2" for="password">
          Password
        </label>
        <input class="appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="password" type="password" placeholder="********">
      </div>
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-4" type="button">
        Sign In
      </button>
      <p class="text-gray-700">Or sign in with</p>
      <div class="flex justify-around items-center mt-4">
        <a href="#" class="text-white bg-blue-800 hover:bg-blue-500 rounded-full h-8 w-8 flex justify-center items-center">
          <i class="fab fa-facebook-f"></i>
        </a>
        <a href="#" class="text-white bg-red-600 hover:bg-red-500 rounded-full h-8 w-8 flex justify-center items-center">
          <i class="fab fa-google"></i>
        </a>
        <a href="#" class="text-white bg-purple-600 hover:bg-purple-500 rounded-full h-8 w-8 flex justify-center items-center">
          <i class="fab fa-twitter"></i>
        </a>
      </div>
    </form>
  </div>
</div>

5. Login Form with Password Visibility Toggleform

<div class="max-w-sm rounded-lg bg-white p-8 shadow-lg">
  <form>
    <div class="mb-4">
      <label class="mb-2 block font-semibold text-gray-700" for="username">
        Username
      </label>
      <input
        class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-100 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
        id="username"
        type="text"
        placeholder="Username"
      />
    </div>
    <div class="mb-4">
      <label class="mb-2 block font-semibold text-gray-700" for="password">
        Password
      </label>
      <div class="relative">
        <input
          class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-100 px-4 py-3 pr-12 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
          id="password"
          type="password"
          placeholder="********"
        />
        <div class="absolute inset-y-0 right-0 mr-4 flex items-center">
          <button
            type="button"
            class="text-gray-700 hover:text-gray-600 focus:outline-none"
            id="password-button"
            aria-label="Toggle password visibility"
          >
            <svg
              class="h-6 w-6 fill-current"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M18.85,9.6c-2.04-2.242-5.406-3.685-8.291-3.942l1.684-3.964c2.628,0.326,5.038,1.766,6.578,3.942L18.85,9.6z"
              ></path>
              <path
                d="M19.085,10.767c-0.343,0.313-7.993,9.233-7.993,9.233C10.691,22.75,9.14,23,8.327,23c-0.744,0-1.45-0.283-2.033-0.798 c-1.122-0.981-1.517-2.502-0.968-3.979c-0.798-1.492-0.3-3.396,1.128-4.304C3.824,12.938,2,9.534,2,9.534 c0.899-1.606,2.976-4.201,6.132-4.423l1.684-3.963c-2.478-0.312-4.822-0.563-7.005-0.563C1.267,0.585,0,1.851,0,3.266 c3.718,0.228,7.571,1.711,10.699,4.552C15.61,9.534,19.085,10.767,19.085,10.767z"
              ></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <button
      class="focus:shadow-outline rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none"
      type="button"
    >
      Sign In
    </button>
  </form>
</div>
<script>
  const togglePassword = document.querySelector("#password-button");
  const password = document.querySelector("#password");

  togglePassword.addEventListener("click", function () {
    const type =
      password.getAttribute("type") === "password" ? "text" : "password";
    password.setAttribute("type", type);
    this.classList.toggle("text-gray-500");
  });
</script>

6. Material Design Login form

<div class="flex h-screen items-center justify-center">
  <div class="mb-4 rounded bg-white px-8 pb-8 pt-6 shadow-md">
    <div class="mb-6 text-center">
      <img
        class="mx-auto h-12 w-auto"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/800px-Google_2015_logo.svg.png"
        alt="google"
      />
      <h1 class="mb-2 mt-4 text-xl font-semibold">Sign In</h1>
      <p class="text-gray-600">to continue to Google</p>
    </div>
    <div class="mb-4">
      <label class="mb-2 block font-bold text-gray-700" for="username">
        Email or phone
      </label>
      <input
        class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
        id="username"
        type="text"
        placeholder="Email or phone"
      />
    </div>
    <div class="mb-4">
      <label class="mb-2 block font-bold text-gray-700" for="password">
        Password
      </label>
      <input
        class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
        id="password"
        type="password"
        placeholder="********"
      />
    </div>
    <div class="flex items-center justify-between">
      <div class="mb-4 flex items-center">
        <input
          id="remember-me"
          name="remember-me"
          type="checkbox"
          class="form-checkbox h-4 w-4 text-blue-500"
        />
        <label for="remember-me" class="ml-2 block text-gray-700">
          Remember me
        </label>
      </div>
      <a
        class="inline-block align-baseline text-sm text-blue-500 hover:text-blue-800"
        href="#"
      >
        Forgot Password?
      </a>
    </div>
    <button
      class="focus:shadow-outline rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none"
      type="button"
    >
      Sign In
    </button>
    <hr class="my-8" />
    <div class="text-center">
      <p class="text-gray-600">
        Don't have an account?
        <a href="#" class="font-semibold text-blue-500 hover:text-blue-800"
          >Create an account</a
        >
      </p>
    </div>
  </div>
</div>

7. Flat Design Login form

<div class="flex h-screen items-center justify-center">
  <div class="mb-4 rounded bg-white px-8 pb-8 pt-6 shadow-md">
    <div class="mb-6 text-center">
      <img
        class="mx-auto h-12 w-auto"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/800px-Google_2015_logo.svg.png"
        alt="google"
      />
      <h1 class="mb-2 mt-4 text-xl font-semibold">Sign In</h1>
      <p class="text-gray-600">to continue to Google</p>
    </div>
    <div class="mb-4">
      <label class="mb-2 block font-bold text-gray-700" for="username">
        Email or phone
      </label>
      <input
        class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
        id="username"
        type="text"
        placeholder="Email or phone"
      />
    </div>
    <div class="mb-4">
      <label class="mb-2 block font-bold text-gray-700" for="password">
        Password
      </label>
      <input
        class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
        id="password"
        type="password"
        placeholder="********"
      />
    </div>
    <div class="flex items-center justify-between">
      <button
        class="focus:shadow-outline rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none"
        type="button"
      >
        Sign In
      </button>
      <a
        class="inline-block align-baseline text-sm text-blue-500 hover:text-blue-800"
        href="#"
      >
        Forgot Password?
      </a>
    </div>
  </div>
</div>

8. Animated Login form

<div class="flex h-screen items-center justify-center bg-gray-900">
  <div class="w-full max-w-md">
    <div class="rounded-lg bg-white px-4 pt-4">
      <h1 class="mt-3 text-center text-2xl font-semibold">Sign In</h1>
      <form class="mt-6">
        <div>
          <label class="mb-2 block font-semibold text-gray-700" for="username">
            Username
          </label>
          <input
            class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 focus:outline-none"
            id="username"
            type="text"
            placeholder="Username"
          />
        </div>
        <div class="mt-4">
          <label class="mb-2 block font-semibold text-gray-700" for="password">
            Password
          </label>
          <input
            class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 focus:outline-none"
            id="password"
            type="password"
            placeholder="********"
          />
        </div>
        <div class="mt-6">
          <button
            class="focus:shadow-outline w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none"
            type="button"
            id="login-button"
          >
            Sign In
          </button>
        </div>
      </form>
    </div>
    <p class="mt-8 text-center">
      Don't have an account?
      <a class="font-semibold text-blue-500 hover:text-blue-800" href="#"
        >Sign up</a
      >
    </p>
  </div>
</div>
<script>
  const loginButton = document.querySelector("#login-button");
  const closeButton = document.querySelector(".close-button");
  const modal = document.querySelector(".modal");
  const modalOverlay = document.querySelector(".modal-overlay");

  loginButton.addEventListener("click", function () {
    modal.style.display = "block";
    modalOverlay.style.display = "block";
  });

  function closeModal() {
    modal.style.display = "none";
    modalOverlay.style.display = "none";
  }

  closeButton.addEventListener("click", closeModal);
  modalOverlay.addEventListener("click", closeModal);
</script>

9. Login Form with Input Validationform

<div class="max-w-sm rounded-lg bg-white p-8 shadow-lg">
  <form>
    <div class="mb-4">
      <label class="mb-2 block font-semibold text-gray-700" for="email">
        Email Address
      </label>
      <input
        class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-100 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
        id="email"
        type="email"
        placeholder="Email Address"
        required
      />
      <p class="hidden text-xs italic text-red-500">
        Please enter a valid email address.
      </p>
    </div>
    <div class="mb-4">
      <label class="mb-2 block font-semibold text-gray-700" for="password">
        Password
      </label>
      <input
        class="mb-3 block w-full appearance-none rounded border border-gray-200 bg-gray-100 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
        id="password"
        type="password"
        placeholder="********"
        required
      />
      <p class="hidden text-xs italic text-red-500">
        Please enter your password.
      </p>
    </div>
    <button
      class="focus:shadow-outline rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none"
      type="button"
      id="login-button"
    >
      Sign In
    </button>
  </form>
  <script>
    const loginButton = document.querySelector("#login-button");
    const emailInput = document.querySelector("#email");
    const passwordInput = document.querySelector("#password");

    loginButton.addEventListener("click", function () {
      const email = emailInput.value;
      const password = passwordInput.value;
      let valid = true;

      if (!/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
        emailInput.nextElementSibling.classList.remove("hidden");
        valid = false;
      } else {
        emailInput.nextElementSibling.classList.add("hidden");
      }

      if (password === "") {
        passwordInput.nextElementSibling.classList.remove("hidden");
        valid = false;
      } else {
        passwordInput.nextElementSibling.classList.add("hidden");
      }

      if (valid) {
        alert("Valid form submission");
      }
    });
  </script>
</div>

10. Login Form with Two-Factor Authenticationform

<div class="flex h-screen items-center justify-center">
  <div class="mb-4 rounded bg-white px-8 pb-8 pt-6 shadow-md">
    <div class="mb-6 text-center">
      <img
        class="mx-auto h-12 w-auto"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/800px-Google_2015_logo.svg.png"
        alt="google"
      />
      <h1 class="mb-2 mt-4 text-xl font-semibold">Sign In</h1>
      <p class="text-gray-600">to continue to Google</p>
    </div>
    <div class="mb-4">
      <label class="mb-2 block font-bold text-gray-700" for="username">
        Email or phone
      </label>
      <input
        class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
        id="username"
        type="text"
        placeholder="Email or phone"
      />
    </div>
    <div class="mb-4">
      <label class="mb-2 block font-bold text-gray-700" for="password">
        Password
      </label>
      <input
        class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
        id="password"
        type="password"
        placeholder="********"
      />
    </div>
    <button
      class="focus:shadow-outline w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none"
      type="button"
      id="login-button"
    >
      Sign In
    </button>
    <hr class="my-8" />
    <div class="text-center">
      <p class="text-gray-600">
        Don't have an account?
        <a href="#" class="font-semibold text-blue-500 hover:text-blue-800"
          >Create an account</a
        >
      </p>
      <p class="mt-2 text-gray-600">Or sign in with</p>
      <div class="mt-4 flex justify-center">
        <a
          href="#"
          class="rounded-l-full bg-blue-900 px-4 py-2 font-bold text-white hover:bg-blue-800"
        >
          <i class="fab fa-twitter mr-2"></i> Twitter
        </a>
        <a
          href="#"
          class="rounded-r-full bg-indigo-900 px-4 py-2 font-bold text-white hover:bg-indigo-800"
        >
          <i class="fab fa-facebook-f mr-2"></i> Facebook
        </a>
      </div>
    </div>
  </div>
  <div class="max-w-sm rounded-lg bg-white p-8 opacity-0 shadow-md">
    <h2 class="mb-3 text-center font-semibold">Two Factor Authentication</h2>
    <p class="mb-5 text-center">
      Enter your 6-digit code from your device below
    </p>
    <div class="flex items-center justify-between">
      <input
        type="text"
        maxlength="1"
        class="w-12 appearance-none rounded border px-3 py-2 text-center leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
        required
      />
      <input
        type="text"
        maxlength="1"
        class="w-12 appearance-none rounded border px-3 py-2 text-center leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
        required
      />
      <input
        type="text"
        maxlength="1"
        class="w-12 appearance-none rounded border px-3 py-2 text-center leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
        required
      />
      <input
        type="text"
        maxlength="1"
        class="w-12 appearance-none rounded border px-3 py-2 text-center leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
        required
      />
      <input
        type="text"
        maxlength="1"
        class="w-12 appearance-none rounded border px-3 py-2 text-center leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
        required
      />
      <input
        type="text"
        maxlength="1"
        class="w-12 appearance-none rounded border px-3 py-2 text-center leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
        required
      />
    </div>
    <button
      class="focus:shadow-outline mt-6 w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none"
      type="button"
      id="verify-button"
    >
      Verify
    </button>
    <div class="mt-3 text-right">
      <a href="#" class="font-semibold text-blue-500 hover:text-blue-800"
        >Resend Code</a
      >
    </div>
  </div>
  <div
    class="modal-overlay fixed inset-0 z-10 hidden bg-black bg-opacity-75"
  ></div>
  <script>
    const loginButton = document.querySelector("#login-button");
    const modal = document.querySelector(".modal");
    const modalOverlay = document.querySelector(".modal-overlay");
    const verifyButton = document.querySelector("#verify-button");

    loginButton.addEventListener("click", function () {
      modal.classList.toggle("opacity-0");
      modal.classList.toggle("pointer-events-none");
      modalOverlay.classList.toggle("hidden");
    });

    verifyButton.addEventListener("click", function () {
      alert("Verification successful");
    });
  </script>
</div>

Previous Article

10 Tailwind Sliders