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

Sign in form
includes Google login button

pratik bhajankar

2 years ago

2.4k
Simple Login Form
Login Form Responsive Component

Ahita Bisma Adlula

1 year ago

2k
login page
modern login form by salvator

Baraka Salvator

1 year ago

1.1k
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

7 months ago

735
mechanical login
mechanical

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.9k
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
Sign in form

Simon Scheffer

3 years ago

17k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k
Login oauth Form

Rihane SOLID SNAKE

1 year ago

776
Login form

Leon Bachmann

3 years ago

14k
Contact us Form with Responsive

KULDEEP

1 year ago

1.1k
Input Formulario
Input used in the form Link form: https://tailwindflex.com/@ameth1208/login

Ameth Galarcio

2 years ago

3.4k