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

512

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 with Icon

Author:
Prashant

2 years ago

14k
Login form with blured background image

Author:
Noah Schmidt

1 year ago

13.3k
Login Form
Login Form

Author:
Md. Tofayel islam

3 months ago

518
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

Author:
zobaidul kaziex

6 months ago

1.5k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

6 months ago

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

Author:
R Thapa

1 year ago

14k
Simple Login Page
This component is responsive for Mobile & Desktop & Dark mode Supported.

Author:
Shariar Hasan

9 months ago

2.1k
Login Card

Author:
Anonymous

8 months ago

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

Author:
Abigail

1 year ago

11.1k
Simple login form

Author:
Freja Jensen

1 year ago

9.6k
Responsive registration form
form with social login buttons

Author:
Anonymous

1 year ago

21.9k
Login form

Author:
Gopi Yadav

2 years ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components