Tailwind Sign in / Sign up Components in Pstls library

Framework

UI Library

Components

Sign in / Sign up from Pstls.

Tailwind CSS

Pstls.

<section class="py-24" style="background-image: url('pstls-assets/images/forms/form-1-shadow.png'); background-repeat: no-repeat; background-size: cover; z-index: -1;" >
  <div class="container px-4 mx-auto">
    <div class="max-w-sm mx-auto text-center"><img class="block mx-auto mb-6" src="pstls-assets/logos/pstls-logo-form.svg" alt="" >
      <h2 class="text-4xl font-heading mb-2" >Log in to your account</h2>
      <p class="leading-8 mb-6" >Please enter your details to proceed.</p>
      
      <form class="text-left" action="">
        <label class="block mb-6"><span class="text-sm" >Email</span>
          <input class="mt-2 w-full py-3 px-4 border border-gray-200 outline-none" type="email" placeholder="Your email address">
        </label>
        <label class="block mb-6"><span class="text-sm" >Password</span>
          <input class="mt-2 w-full py-3 px-4 border border-gray-200 outline-none" type="password" placeholder="Your password">
        </label>
        <label class="flex items-start mb-6">
          <input class="mr-3" type="checkbox" name="terms" value="1"><span class="text-xs"><span >By signing up, you agree to our</span> <a class="text-blue-500 hover:underline" href="#" >Terms, Data Policy, and Cookies Policy.</a></span>
        </label><a class="inline-block mb-4 w-full px-8 py-3 text-center text-white font-bold bg-black hover:bg-gray-900" href="#" >Sign In</a><a class="flex mb-6 items-center justify-center px-6 py-3 w-full text-center text-black font-bold border border-gray-200 hover:border-gray-300" href="#"><img class="mr-3" src="pstls-assets/logos/google-form-xs.svg" alt=""><span >Sign In with Google</span></a>
        
        <p class="text-xs text-center"><span >Don’t have an account?</span> <a class="text-blue-500 hover:underline" href="#" >Sign Up</a></p>
      </form>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Centered login form with email, password, and Google sign-in

A centered authentication card with a logo, serif heading "Log in to your account," email and password fields, a terms checkbox, a black Sign In button, a Google sign-in button, and a sign-up link. The layout is a vertically stacked form on a faint pastel gradient background.