Home
Aman kumar
Login with google provider

Login with google provider

This tailwind example is contributed by Aman kumar, on 08-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Aman kumar

1.3k

Fork Fullscreen

<main
  class="w-full h-screen flex flex-col items-center justify-center px-4"
>
  <div class="max-w-sm w-full text-gray-600 space-y-5">
    <div class="text-center pb-8">
     
      <div class="mt-5">
        <h3 class="text-gray-800 text-2xl font-bold sm:text-3xl">
          Log in to your account
        </h3>
      </div>
    </div>
    <form onSubmit="event.preventDefault()" class="space-y-5">
      <div>
        <label class="font-medium"> Email </label>
        <input
          type="email"
          required
          class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
        />
      </div>
      <div>
        <label class="font-medium"> Password </label>
        <input
          type="password"
          required
          class="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg"
        />
      </div>
      <div class="flex items-center justify-between text-sm">
        <div class="flex items-center gap-x-3">
          <input
            type="checkbox"
            id="remember-me-checkbox"
            class="checkbox-item peer hidden"
          />
          <label
            for="remember-me-checkbox"
            class="relative flex w-5 h-5 bg-white peer-checked:bg-indigo-600 rounded-md border ring-offset-2 ring-indigo-600 duration-150 peer-active:ring cursor-pointer after:absolute after:inset-x-0 after:top-[3px] after:m-auto after:w-1.5 after:h-2.5 after:border-r-2 after:border-b-2 after:border-white after:rotate-45"
          ></label>
          <span>Remember me</span>
        </div>
        <a
          href="javascript:void(0)"
          class="text-center text-indigo-600 hover:text-indigo-500"
          >Forgot password?</a
        >
      </div>
      <button
        class="w-full px-4 py-2 text-white font-medium bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-600 rounded-lg duration-150"
      >
        Sign in
      </button>
    </form>
    <button
      class="w-full flex items-center justify-center gap-x-3 py-2.5 border rounded-lg text-sm font-medium hover:bg-gray-50 duration-150 active:bg-gray-100"
    >
      
      <img
        src="https://raw.githubusercontent.com/sidiDev/remote-assets/7cd06bf1d8859c578c2efbfda2c68bd6bedc66d8/google-icon.svg"
        alt="Google"
        class="w-5 h-5"
      />
      
      Continue with Google
    </button>
    <p class="text-center">
      Don't have an account?
      <a
        href="javascript:void(0)"
        class="font-medium text-indigo-600 hover:text-indigo-500"
        >Sign up</a
      >
    </p>
  </div>
</main>

Related Examples

login
login

Author:
Abhishek Kumar

5 months ago

709
Login Card

Author:
Anonymous

1 year ago

3.3k
Login form #1
login form design

Author:
QQ-VVN

9 months ago

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

Author:
Anonymous

11 months ago

584
Full page sign-In form

Author:
Anonymous

2 years ago

3.5k
Sign up
sign up page

Author:
gidy

9 months ago

1.4k
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

1 year ago

2.2k
Allconnect Logic

Author:
Mario Williams

3 months ago

178
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

1 year ago

2.7k
Login Card

Author:
Anonymous

2 years ago

7.1k
Beautiful sign in form
form with continue with google and continue with github buttons

Author:
Anonymous

2 years ago

5.6k
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Author:
Lekhraj Ghimire

8 months ago

839

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components