Login Pages Tailwind CSS

Login form with gradient background

If you want a creative log-in form with a gradient backdrop colour, you may use this example.

Preview
Code

                                                <body class="font-inter overflow-hidden">
    <section class="flex justify-center relative">
      <img src="https://pagedone.io/asset/uploads/1702362010.png" alt="gradient background image" class="w-full h-full object-cover fixed">
      <div class="mx-auto max-w-lg px-6 lg:px-8 absolute py-20">
        <img src="https://pagedone.io/asset/uploads/1702362108.png" alt="pagedone logo" class="mx-auto lg:mb-11 mb-8 object-cover">
        <div class="rounded-2xl bg-white shadow-xl">
          <form action="" class="lg:p-11 p-7 mx-auto">
            <div class="mb-11">
              <h1 class="text-gray-900 text-center font-manrope text-3xl font-bold leading-10 mb-2">Welcome Back</h1>
              <p class="text-gray-500 text-center text-base font-medium leading-6">Let’s get started with your 30 days free trail</p>
            </div>
            <input type="text" class="w-full h-12 text-gray-900 placeholder:text-gray-400 text-lg font-normal leading-7 rounded-full border-gray-300 border shadow-sm focus:outline-none px-4 mb-6" placeholder="Username">
            <input type="text" class="w-full h-12 text-gray-900 placeholder:text-gray-400 text-lg font-normal leading-7 rounded-full border-gray-300 border shadow-sm focus:outline-none px-4 mb-1" placeholder="Password">
            <a href="javascript:;" class="flex justify-end mb-6">
              <span class="text-indigo-600 text-right text-base font-normal leading-6">Forgot Password?</span>
            </a>
            <button class="w-full h-12 text-white text-center text-base font-semibold leading-6 rounded-full hover:bg-indigo-800 transition-all duration-700 bg-indigo-600 shadow-sm mb-11">Login</button>
            <a href="javascript:;" class="flex justify-center text-gray-900 text-base font-medium leading-6"> Don’t have an account? <span class="text-indigo-600 font-semibold pl-3"> Sign Up</span>
            </a>
          </form>
        </div>
      </div>
    </section>
  </body>

HTML Copy

Login with social media button

This sample page allows you to log in using CTA and social networking buttons.

Preview
Code

Figma File

Login page with gradient background & form

You may try using this example to get a gradient backdrop with a creative form design next to the headline and explanation.

Preview
Code

Figma File

Login page with CTA button & illustrations

This sample can be used if you want to show an illustration with a heading and a call to action.

Preview
Code

Figma File

Login page with split & form

This design style can be utilised to give pattern to the description background adjacent to the contact form. It gives the part a striking appearance.

Preview
Code

Figma File

Login page with gradient background & image

If you would like a gradient background with a picture next to the headline, description, CTA buttons, and form, you can use this example.

Preview
Code

Figma File