Skip to content

Authentication pages: sign in, sign up, forgot password

Three consistent screens in one card: sign in, sign up with live password criteria, and a reset request.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Visitors move between screens without a page reload, and the e-mail address already typed follows them. Sign in offers a password reveal, Remember me and a warning when Caps Lock is on. Sign up shows three criteria that tick as you type and checks that the confirmation matches. Forgot password always gives the same answer, whether the account exists or not, so it never reveals who is registered. Errors appear under each field on submit and focus moves to the first field to fix; fields carry the right autocomplete attributes for password managers. Accessibility: everything works with the keyboard, each message is tied to its field through aria-describedby and aria-invalid, the reveal button is a toggle (aria-pressed), criteria and Caps Lock are announced by live regions, focus moves to the heading of each new screen, contrast exceeds 4.5:1 in light and dark modes and the animation stops with prefers-reduced-motion. Without JavaScript, the three forms stay usable with browser validation. Plug in your authentication service: atr:submit event in HTML, onSubmit prop in React.

Code

Loading the code…

Archive contents

pages-authentification-trio-html-tailwind.zip3 files · 9 Ko

  • index.html29 Ko
  • README.md4 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 16, 2026.

In the same spirit

  • A keyboard-filterable dropdown to pick one or several values, shown as chips, backed by a real select field.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • An e-mail field and its button on one line, a GDPR consent checkbox, clear errors, a typo suggestion and a confirmation message.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A short form for tradespeople: type of job, description, postcode, timeframe, optional photos, then a confirmation summary.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • An appointment form: reason, day with the native date picker, morning and afternoon slots as radio buttons, full slots crossed out and a summary of the choice.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component