login

This tailwind example is contributed by Abhishek Kumar, on 05-Sep-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Register, Sign in

Author Abhishek Kumar

Tailwind v3.4 1.4k 2

Fork Fullscreen

<div class="grid min-h-screen w-full grid-cols-12 overflow-hidden bg-[#422ED0]">
      
      <div class="element z-3 col-span-7 flex p-32 text-white" style="">
        <div class="w-full min-w-sm flex flex-col justify-between ">
          <div>
            
            <img src="https://www.psit.ac.in/assets/webp/PSIT_logo_Red.svg" alt="" style="filter: brightness(0) invert(1);" />
          </div>
          <div>
            <h1 class="my-8 text-7xl leading-20 font-bold text-indigo-50">Enter your account and discover new experiences</h1>
            <p class="mb-2 text-xl">You do not have an account?</p> 
            <div class="flex h-12 justify-start items-center gap-x-6 dark:text-white">
                <a class="group flex h-min items-center disabled:opacity-50 disabled:hover:opacity-50 hover:opacity-95 justify-center ring-none rounded-lg shadow-lg font-semibold py-2 px-4 font-dm focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 bg-violet-500 border-b-violet-700 disabled:border-0 disabled:bg-violet-500 disabled:text-white ring-white text-white border-b-4 hover:border-0 active:border-0 hover:text-gray-100 active:bg-violet-800 active:text-gray-300 focus-visible:outline-violet-500 text-sm sm:text-base dark:bg-gray-700 dark:border-gray-700 dark:border-b-gray-900"
                    href="">
                   Create New User ( New Registration )
                </a>
                <a class="group flex h-min ring-none items-center justify-center hover:opacity-95 disabled:opacity-50 rounded-lg py-2 px-4 font-dm focus:outline-none !ring-transparent text-violet-800 border border-violet-500 border-b-violet-400 border-b-4 hover:border active:border bg-white hover:text-violet-900 hover:bg-gray-50 active:bg-gray-100 active:text-violet-600 focus-visible:outline-violet-600 focus-visible:ring-violet-700 text-sm sm:text-base dark:bg-gray-700 dark:border-gray-700 dark:border-b-gray-900 dark:text-white"
                    href="">
                    <svg aria-hidden="true" class="h-3 w-3 flex-none fill-violet-600 group-active:fill-current">
                        <path
                            d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z">
                        </path>
                    </svg>
                    <span class="ml-3">Create Parent Login</span>
                </a>
            </div>

</div>
          <div class="mb-0 hidden">
            <h2 class="mb-4 text-4xl font-bold text-indigo-50">Welcome to <span class="text-4xl" style='font-family: "Times New Roman", Times, serif;'>PSIT</span></h2>
            <p class="text-xl text-indigo-50">The access to this website is limited to the institute Management, Faculty and Students only (Login to your accounts to navigate the website). Visitors may kindly visit <a href="#" class="text-xl text-indigo-100"> www.psit.ac.in</a> for information about the institutes.</p>

</div>
        </div>
      </div>

<div class="relative z-3 col-span-5 flex rounded-tl-[44px] bg-white">
        <div class="absolute top-4 right-0 -left-4 z-2 h-full w-full rounded-tl-[44px] bg-white/50"></div>
        <div class="z-10 w-full">
          <div class="z-4 mx-auto mt-20 max-w-sm bg-white p-4 sm:p-10 lg:max-w-lg xl:max-w-xl">
            <h2 class="mb-10 text-4xl font-bold text-slate-600">Hi, Welcome! 👋</h2>

<input type="email" placeholder="Email" class="mb-6 w-full border-b border-gray-300 px-4 py-5 text-lg font-medium text-slate-700 focus:ring-2 focus:ring-indigo-400 focus:outline-none" />

<input type="password" placeholder="Password" class="mb-6 w-full border-b border-gray-300 px-4 py-5 text-lg font-medium text-slate-700 focus:ring-2 focus:ring-indigo-400 focus:outline-none" />

<div class="mb-10 flex items-center justify-between">
              <label class="flex items-center space-x-2">
                <input type="checkbox" class="form-checkbox text-indigo-600" checked />
                <span class="font-medium text-gray-600">Remember me</span>
              </label>
              <a href="#" class="text-lg font-medium text-indigo-600 hover:underline">Forgot password?</a>
            </div>

<button class="mb-6 w-full transform-gpu rounded-full bg-gradient-to-r from-blue-500 to-purple-500 px-8 py-4 font-bold text-white transition-transform hover:-translate-y-1 hover:shadow-lg">Click me!</button>

<div class="mb-6 flex items-center justify-center">
              <span class="w-1/5 border-b border-white lg:w-1/4"></span>
              <span class="mx-2 text-xs text-gray-400">OR</span>
              <span class="w-1/5 border-b border-white lg:w-1/4"></span>
            </div>

<div class="flex space-x-4">
              <button class="flex w-1/2 items-center justify-center rounded-lg border border-gray-300 py-2 font-medium text-slate-700 hover:bg-gray-50">
                <img src="https://www.svgrepo.com/show/303108/facebook-1-logo.svg" class="mr-2 h-5 w-5" alt="Facebook" />
                Facebook
              </button>
              <button class="flex w-1/2 items-center justify-center rounded-lg border border-gray-300 py-2 font-medium text-slate-700 hover:bg-gray-50">
                <img src="https://www.svgrepo.com/show/355037/google.svg" class="mr-2 h-5 w-5" alt="Google" />
                Google
              </button>
            </div>

<p class="mt-12 text-center text-sm text-gray-500">Don’t have an account? <a href="#" class="text-indigo-600 hover:underline">Sign up</a></p>
          </div>
        </div>
      </div>
    </div>

Related Examples

cards
html , css ,

Hacker Development

1 year ago

1.2k
Login
Login

Amine Ghanim

1 year ago

2k
Responsive login form
form with social login buttons

Anonymous

9 months ago

565
login page
modern login form by salvator

Baraka Salvator

1 year ago

1.3k
Neon login Form #3
Login form neon design.

QQ-VVN

1 year ago

853
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.5k
Login

Amine Ghanim

1 year ago

1.3k
Hacker terminal #fake
hacker terminal tailwind css

QQ-VVN

1 year ago

1.8k
Loginpage

Ramesh Kumar Sah

1 year ago

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

zobaidul kaziex

2 years ago

3.8k
Quick Signup Form

Paul Intay

2 years ago

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

Nomusa Botha

2 years ago

2.6k