Login Form Component

The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

This tailwind example is contributed by R Thapa, on 13-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Form Login Form

Author R Thapa

Tailwind v3.4 8.9k 7

Fork Fullscreen

<div class="contain py-16">
  <div class="max-w-lg mx-auto shadow px-6 py-7 rounded overflow-hidden">
    <h2 class="text-2xl uppercase font-medium mb-1">Login</h2>
    <p class="text-gray-600 mb-6 text-sm">Welcome! So good to have you back!</p>
    <form autocomplete="off">
      <p class="text-red-500"></p>
      <div class="space-y-2">
        <div><label for="email" class="text-gray-600 mb-2 block"></label>Email address<input type="email" name="email" id="email" class="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded focus:ring-0 focus:border-teal-500 placeholder-gray-400" placeholder="youremail.@domain.com">
        </div>
      </div>
      <div class="space-y-2">
        <div><label for="password" class="text-gray-600 mb-2 block"></label>Password<div class="relative"><input type="password" name="password" id="password" class="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded focus:ring-0 focus:border-teal-500 placeholder-gray-400" placeholder="***********">
            <div
              class="cursor-pointer absolute inset-y-0 right-0 flex items-center px-8 text-gray-600 border-l border-gray-300">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-5 h-5">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z">
                </path>
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-4">
        <button type="submit" class="block w-full py-2 text-center text-white bg-teal-500 border border-teal-500 rounded hover:bg-transparent hover:text-teal-500 transition uppercase font-roboto font-medium">Login</button>
        <div class="flex gap-2 pt-5">
          <p class="text-gray-600 text-sm">Don't have an account?</p><a class="text-gray-600 text-sm underline"
            href="/register">Register here</a>
        </div>
      </div>
    </form>
  </div>
</div>

Related Examples

Login form

Leon Bachmann

3 years ago

16k
Responsive login form with image

Lukas Müller

3 years ago

16.6k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
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
User registration form

Leon Bachmann

3 years ago

25.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
Login Form with Icon

Prashant

4 years ago

18.9k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.6k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.7k