Login page

A simple login page with icons

This tailwind example is contributed by Robert Chunga, on 21-Jun-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author Robert Chunga

Tailwind v3.4 2.4k 8

Fork Fullscreen

<div class="bg-gray-200 h-screen flex items-center justify-center p-4 dark:bg-slate-800">
  <div class="bg-white p-6 shadow-lg rounded-xl w-96 dark:bg-slate-100">
    <form>
      <div class="text-2xl text-blue-800 font-bold capitalize text-center mb-4">
        <h3>welcome back!</h3>
      </div>
      <div>
        <div>
          <div class="capitalize text-xl mb-2">
            <label>username</label>
          </div>
          <div class="border-2 relative">
            <span class="absolute px-2 inset-y-0 left-0 flex items-center text-gray-400">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
              </svg>
            </span>
            <input class="w-full placeholder:capitalize px-8 py-1.5 outline-blue-800" type="text" placeholder="enter username" >
          </div>
        </div>
        <div class="mt-4">
          <div class="capitalize text-xl mb-2">
            <label>password</label>
          </div>
          <div class="border-2 relative">
            <span class="absolute px-2 inset-y-0 left-0 flex items-center text-gray-400">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
              </svg>
            </span>
            <input class="w-full placeholder:capitalize px-8 py-1.5 outline-blue-800" type="password" placeholder="enter password" >
          </div>
        </div>
        <div class="sm:flex sm:justify-between inline-block my-4">
          <div class="flex">
            <input class="text-blue-800" type="checkbox">
            <span class="pl-1">Remember me</span>
          </div>
          <div class="text-blue-800 hover:underline">
            <a href="#">Forgot password?</a>
          </div>
        </div>
        <div>
          <button class="bg-blue-800 text-xl text-white font-medium uppercase p-2 rounded-lg w-full opacity-90 hover:opacity-100">login</button>
        </div>
        <div class="text-[18px] text-center mt-4">
          <p>Don't have an account? <a class="capitalize text-blue-800 hover:underline cursor-pointer" href="#">register</a></p>
        </div>
      </div>
    </form>
  </div>
</div>

Related Examples

Login form
Component was one shot generated using https://inspi.me

yogourt

9 months ago

479
Authentication
Tailwind CSS Authentication Beautifully designed, fully responsive, expertly crafted authentication examples

Aman kumar

1 year ago

1.9k
login
Dark mode login

Hacker Development

1 year ago

2k
Responsive login form
form with social login buttons

Aman kumar

2 years ago

6k
NDUSTRIALCORE login
NDUSTRIALCORE

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.3k
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.

Anonymous

2 years ago

3.9k
login page
login page

Tofayel Islam

9 months ago

941
login from

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.2k
Login Form
Admin Login Form

Khalid

2 years ago

2.6k
Simple generated login form
Login

Jerome Soriano

8 months ago

564
Simple login form

R Thapa

3 years ago

27.1k
login
login

Abhishek Kumar

1 year ago

1.4k