Sign in / Login Form

This tailwind example is contributed by Bunny, on 05-Jul-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Input Login Form

Author Bunny

Tailwind v3.4 14.6k 15

Fork Fullscreen

<div class="container px-4 mx-auto">
  <div class="max-w-lg mx-auto">
    <div class="text-center mb-6">
      <h2 class="text-3xl md:text-4xl font-extrabold">Sign in</h2>
    </div>
    <form action="">
      <div class="mb-6">
        <label class="block mb-2 font-extrabold" for="">Email</label>
        <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="email">
      </div>
      <div class="mb-6">
        <label class="block mb-2 font-extrabold" for="">Password</label>
        <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="password" placeholder="**********">
      </div>
      <div class="flex flex-wrap -mx-4 mb-6 items-center justify-between">
        <div class="w-full lg:w-auto px-4 mb-4 lg:mb-0">
          <label for="">
              <input type="checkbox">
              <span class="ml-1 font-extrabold">Remember me</span>
            </label>
        </div>
        <div class="w-full lg:w-auto px-4"><a class="inline-block font-extrabold hover:underline" href="#">Forgot your
            password?</a></div>
      </div>
      <button class="inline-block w-full py-4 px-6 mb-6 text-center text-lg leading-6 text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200">Sign in</button>
      <p class="text-center font-extrabold">Don&rsquo;t have an account? <a class="text-red-500 hover:underline"
          href="#">Sign up</a></p>
    </form>
  </div>
</div>

Related Examples

Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Sign in form

Simon Scheffer

3 years ago

17k
Sign In page with google/facebook/twitter buttons

Orion.c

3 years ago

23.1k
Responsive registration form
form with social login buttons

Anonymous

3 years ago

30.6k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.8k
Login form

Leon Bachmann

3 years ago

14k
Login form

Gopi Yadav

4 years ago

12.1k
Login Form

Amit Pachange

4 years ago

13.7k
Login Form with Icon

Prashant

4 years ago

18.9k
Simple login page template

Freja Jensen

3 years ago

13.3k
Sign in form
simple full-height login form

Lukas Müller

3 years ago

10.5k
Invalid input detected message
incorrect input notification

Conan Hilton

3 years ago

12.8k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.9k
Simple login form

R Thapa

3 years ago

27.1k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Anja Müller

3 years ago

8.6k