login

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

Author Abhishek Kumar

569

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

Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

7 months ago

899
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

7 months ago

931
Welcome Back

Author:
Tanvir Islam

10 months ago

1.1k
login page

Author:
Abid Ullah

1 year ago

2.4k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

8 months ago

655
Instagram Login Clone

Author:
Victoria Blount

6 months ago

399
Simple login form

Author:
R Thapa

2 years ago

24.5k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

5 months ago

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

Author:
ardianhu

1 year ago

2.7k
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

751
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

7.9k
login page
modern login form by salvator

Author:
Baraka Salvator

7 months ago

516

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components