Mobile Login Screen with Social Sign-In

A mobile login screen with social sign-in, built with Tailwind CSS: Apple and Google buttons, an email and password form with a show password toggle, inline validation, a forgot password bottom sheet and a sign up link. It is an HTML mobile template for mobile websites and PWAs and can be packaged as a native app with Capacitor. Use it as the sign in page or login UI of a productivity, SaaS or community app.

How it works

The root .mls-app is a phone-width column with a compact top bar, the sign in block in [data-mls-signin] and the sign up link pinned to the bottom with mt-auto. The form uses novalidate, real type="email" and type="password" inputs and the autocomplete values email and current-password, so password managers fill it.

script.js validates each field after its first blur and then live on every input event. Errors appear in the .mls-error element linked through aria-describedby, and the input gets aria-invalid="true", which style.css turns red. On submit, invalid fields are checked and focus moves to the first one. A valid submit shows the .mls-spinner for a moment and then the [data-mls-success] state with the signed in email. The [data-mls-toggle] button switches the password field between password and text and updates aria-pressed and its label.

The Forgot password? button opens #mls-sheet, a native <dialog> styled as a bottom sheet with showModal(). It closes with Escape, the backdrop or the close button, copies a valid login email into its own field and swaps to a "check your inbox" message after a valid submit.

Customization

• --mls-primary in style.css: focus rings and the input focus border; change it together with the bg-indigo-600 classes on the buttons and logo tile.
• --mls-radius in style.css: corner radius of inputs and social buttons.
• --mls-error in style.css: colour of error text and invalid borders.
• EMAIL_RE in script.js: the email pattern used by both forms.
• Replace the setTimeout in the submit handler with fetch() to your auth endpoint; show a server error with setError(password, '...').
• data-mls-social on each social button: the provider name; start your OAuth redirect in its click handler.
• Remove the [data-mls-success] block and redirect instead if your app opens a dashboard after sign in.

Use cases

• SaaS and productivity apps: the sign in screen of a PWA or Capacitor build.
• Community and membership sites: a mobile login with social accounts.
• Booking and delivery apps: quick return sign in before checkout.

Accessibility

Every input has a visible <label>, errors are linked with aria-describedby and marked with aria-invalid, and the first invalid field receives focus. Social buttons have full "Continue with" labels, and their status text uses role="status". The sheet is a modal dialog with aria-labelledby, a built-in focus trap and focus returned to its trigger on close. Touch targets are at least 44 px, focus outlines are visible, and the sheet animation is off under prefers-reduced-motion.