Home
Robert Chunga
Login page

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author Robert Chunga

1.9k

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

Sign In page CezeriLab

Author:
Sedat Kumcu

1 year ago

1.6k
Login with social media buttons

Author:
TailwindFlex

3 years ago

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

Author:
Anonymous

1 year ago

3.4k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Ari Mustofa

1 year ago

2.7k
Loginpage

Author:
Ramesh Kumar Sah

5 months ago

472
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

17.6k
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

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

Author:
Orion.c

3 years ago

22.3k
Beautiful sign in form
form with continue with google and continue with github buttons

Author:
Anonymous

2 years ago

5.6k
Tailwind login form with image
basic form design useful for rapid prototyping.

Author:
Abigail

2 years ago

13k
Login form

Author:
Gopi Yadav

3 years ago

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

Author:
yogourt

1 month ago

200

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components