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
A clean and minimalist login form featuring email and password fields, social login buttons, and a simple layout inspired by modern SaaS dashboards. Copy details

JUGENDRA GANGWAR

6 days ago

83
Login Page
A responsive minimal login page built with pure HTML and Tailwind CSS. Includes social authentication buttons, email & password fields, remember me option, and a clean centered card design that's easy to integrate into SaaS and web applications.

JUGENDRA GANGWAR

3 weeks ago

10
Login page
Login and register page, you can reuse both

Abhiraj

1 year ago

2.6k
Simple login page template

Freja Jensen

3 years ago

13.3k
Login Form
Login Form With google icon

Md. Tofayel islam

1 year ago

2.1k
Login form

Leon Bachmann

3 years ago

14k
Login Form
Login Form

Md. Tofayel islam

2 years ago

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

Abigail

3 years ago

14k
Sign in form
includes Google login button

pratik bhajankar

2 years ago

2.6k
simple login
simple login

Tanvir Hasan Bappy (Tanvir)

9 months ago

372
Registration Form

Maxim

1 year ago

1.7k
Instagram Login Clone
login form and signup

gidy

1 year ago

1.1k