Skip to content

Login & Sign Up

Authentication forms: sign in, register, password reset.

6 component(s)

Sliding Login and Register Form – Pure CSS login & sign up preview

Sliding Login and Register Form

Pure CSS sign in and sign up forms with a gradient overlay panel that slides between them, plus a mobile switcher and client-side validation.

Pure CSS Login & Sign Up
Forgot Password Form – Tailwind CSS login & sign up preview

Forgot Password Form

Tailwind CSS forgot password form with email validation, loading spinner, check-your-inbox success state and a resend cooldown timer.

Tailwind CSS Login & Sign Up
Login Form with Floating Labels – Pure CSS login & sign up preview

Login Form with Floating Labels

Clean pure CSS login card with animated floating labels, show/hide password, inline validation and a simulated sign-in state in vanilla JavaScript.

Pure CSS Login & Sign Up
Signup Form with Validation – Bootstrap 5 login & sign up preview

Signup Form with Validation

Bootstrap 5 signup form with live password rules, a strength meter, show/hide toggle, password confirmation and a required terms checkbox.

Bootstrap 5 Login & Sign Up
Login Form with Social Buttons – Tailwind CSS login & sign up preview

Login Form with Social Buttons

Tailwind CSS login form with Google and GitHub buttons, remember me, password visibility toggle and accessible inline validation.

Tailwind CSS Login & Sign Up

What is a login and sign-up form?

Login and sign-up forms let users authenticate and create accounts. This category covers sign-in forms, registration forms, password reset and "forgot password" flows, and combined layouts with social login buttons. These forms are small but critical: friction or confusion here directly costs users.

When to use these forms

  • As a card or panel on a dedicated auth page.
  • Inside a modal or drawer when users must sign in without leaving the current page.
  • In checkout flows with a "continue as guest" alternative.
  • For password reset, magic link and email verification steps.

Best practices

  • Use the right attributes so password managers work: autocomplete="username" or "email", autocomplete="current-password" on login and "new-password" on sign-up.
  • Use type="email" for email fields to get the correct mobile keyboard.
  • Every input needs a visible <label>; placeholders disappear when typing and are not a replacement.
  • Offer a show/hide password toggle as a real button with an aria-label and aria-pressed.
  • Show errors next to the field, link them with aria-describedby, and do not reveal whether an email exists in the system.
  • Do not block pasting into password fields.
  • Keep sign-up short; ask for extra profile details later.
  • Make the primary button full width on mobile and easy to reach.

Framework versions

The login form and sign up form examples here include centered cards, split layouts with images, social login variants and password reset screens. Bootstrap 6 versions use theme-* colour roles and can be placed inside its <dialog>-based modal for sign-in popups. Bootstrap 5 versions use .form-control, floating labels and validation classes, Tailwind CSS versions use form-friendly utilities, and pure CSS versions work anywhere. Preview them live, copy the HTML and CSS, and connect the form to your own authentication backend.