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

213

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

Login page

Author:
Reuben Enahoro

10 months ago

1.7k
Login with social media buttons

Author:
TailwindFlex

3 years ago

13.3k
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:
Abhiraj

8 months ago

1.6k
Login Form
Login Form

Author:
Md. Tofayel islam

1 year ago

1.9k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

3 months ago

971
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

932
login form
basic login form

Author:
Ahmath S.

3 months ago

161
Login Form
Color Updates: - Changed background to gradient `from-indigo-800 to-blue-900` - Updated text colors to match the new theme - Updated button and interactive element colors - Added dark mode color variants Enhanced Styling: - Added gradient background - Increased padding and spacing - Improved border radius to `rounded-xl` - Added hover scale effects - Enhanced shadow with `shadow-2xl` Added Animations: - Fade-in animation on load - Scale transition on card hover - Button ripple effect on click - Smooth transitions for all interactive elements Improved Dark Mode: - Enhanced dark mode colors - Added system preference detection - Improved dark mode contrast - Added dark mode specific focus rings Enhanced Functionality: - Added basic form validation - Added ripple effect on button click - Improved hover and focus states - Added transition animations Accessibility Improvements: - Maintained proper contrast ratios - Enhanced focus states - Added proper ARIA attributes - Improved form labels

Author:
nejaa badr

11 months ago

1.7k
Auth Page with TailwindCSS and AlpineJS

Author:
ariaw

6 months ago

464
login!!!!
html , css

Author:
Hacker Development

5 months ago

865
Login form #1
login form design

Author:
QQ-VVN

5 months ago

119
login
Dark mode login

Author:
Hacker Development

5 months ago

953

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components