Open demo

CSS code

HTML 
<div class="ss">
  <main class="ss-left">
    <div class="ss-logo"><i aria-hidden="true"></i>Meridian</div>
    <h1>Log in to your account</h1>
    <p class="ss-sub">Welcome back. Your dashboards missed you.</p>
    <form action="#" method="post" onsubmit="event.preventDefault()">
      <label class="ss-label" for="ss-email">Work email</label>
      <div class="ss-field"><input class="ss-input" type="email" id="ss-email" name="email" placeholder="[email protected]" autocomplete="username" required></div>
      <label class="ss-label" for="ss-password">Password</label>
      <div class="ss-field">
        <input class="ss-input has-peek" type="password" id="ss-password" name="password" placeholder="Enter your password" autocomplete="current-password" required>
        <button type="button" class="ss-peek" data-peek aria-controls="ss-password" aria-pressed="false" aria-label="Show password"><svg class="ss-on" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11.5A4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 0 1 0 9zm0-7a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/></svg><svg class="ss-off" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.3 2 2 3.3l3.1 3.1C3.1 8.1 2 10.6 2 12c0 0 3 7 10 7 2 0 3.7-.6 5.1-1.4l3.6 3.6 1.3-1.3L3.3 2zM12 16.5A4.5 4.5 0 0 1 7.5 12c0-.8.2-1.5.6-2.2l1.5 1.5a2.5 2.5 0 0 0 3.1 3.1l1.5 1.5c-.7.4-1.4.6-2.2.6zm0-11.5c-1.3 0-2.5.2-3.5.6l1.7 1.7c.6-.2 1.2-.3 1.8-.3a4.5 4.5 0 0 1 4.5 4.5c0 .6-.1 1.2-.3 1.8l2.9 2.9C21.1 14.3 22 12 22 12s-3-7-10-7z"/></svg></button>
      </div>
      <div class="ss-row">
        <label class="ss-check"><input type="checkbox" name="remember"> Keep me signed in</label>
        <a href="#">Forgot password?</a>
      </div>
      <button class="ss-go" type="submit">Sign in</button>
      <button class="ss-sso" type="button">Sign in with SSO</button>
    </form>
    <p class="ss-foot">Don’t have an account? <a href="#">Start a free trial</a></p>
  </main>
  <aside class="ss-right">
    <div class="ss-stats">
      <div><b>28k+</b><span>teams on board</span></div>
      <div><b>99.99%</b><span>uptime last year</span></div>
      <div><b>4.8/5</b><span>average rating</span></div>
    </div>
    <blockquote>“We moved three tools into Meridian in a week. Reporting that used to take Fridays now takes minutes.”</blockquote>
    <div class="ss-who"><i aria-hidden="true"></i><span><b>Priya Natarajan</b>Head of Analytics, Corvid</span></div>
  </aside>
</div>
CSS 
/* SaaS login: form column with a show-password button and an SSO route, beside a dark proof panel (stats and a quote) from 960px. */
.ss{--ss-ink:#0f172a;--ss-muted:#64748b;--ss-line:#8a94a6;--ss-slate:#334155;
  min-height:100vh;display:flex;background:#fff;color:var(--ss-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ss h1,.ss p,.ss blockquote{margin:0}
.ss-left{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px;max-width:560px;margin:0 auto}
.ss-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;margin-bottom:44px}
.ss-logo i{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--ss-slate),var(--ss-ink));display:inline-block}
.ss h1{font-size:1.7rem;letter-spacing:-.02em;margin-bottom:6px}
.ss-sub{color:var(--ss-muted);font-size:.95rem;margin-bottom:30px!important}
.ss-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.ss-field{position:relative;margin-bottom:18px}
.ss-input{display:block;width:100%;padding:12px 14px;border:1px solid var(--ss-line);border-radius:10px;font:inherit;font-size:.95rem;color:inherit;background:#fff;
  transition:border-color .15s,box-shadow .15s}
.ss-input.has-peek{padding-right:48px}
.ss-input::placeholder{color:var(--ss-muted)}
.ss-input:focus{outline:none;border-color:var(--ss-slate);box-shadow:0 0 0 3px rgba(51,65,85,.2)}
.ss-peek{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;border-radius:6px;background:none;cursor:pointer;color:var(--ss-muted);padding:6px;display:flex}
.ss-peek:hover,.ss-peek[aria-pressed="true"]{color:var(--ss-slate)}
.ss-peek svg{width:19px;height:19px;fill:currentColor}
.ss-peek .ss-off,.ss-peek[aria-pressed="true"] .ss-on{display:none}
.ss-peek[aria-pressed="true"] .ss-off{display:block}
.ss-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.87rem;margin-bottom:24px}
.ss-check{display:flex;gap:7px;align-items:center;font-weight:500;color:#475569;cursor:pointer}
.ss-check input{width:16px;height:16px;margin:0;accent-color:var(--ss-ink)}
.ss a{color:var(--ss-ink);font-weight:600;text-decoration:none;border-radius:3px}
.ss a:hover{text-decoration:underline}
.ss-go{width:100%;padding:13px;border:0;border-radius:10px;background:var(--ss-ink);color:#fff;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;transition:background-color .15s}
.ss-go:hover{background:#1e293b}
.ss-sso{width:100%;margin-top:12px;padding:12px;border:1px solid var(--ss-line);border-radius:10px;background:#fff;color:inherit;font:inherit;font-weight:600;font-size:.92rem;
  cursor:pointer;transition:background-color .15s}
.ss-sso:hover{background:#f8fafc}
.ss-foot{margin-top:26px!important;font-size:.9rem;color:var(--ss-muted)}
.ss-foot a{font-weight:700}
.ss a:focus-visible,.ss-peek:focus-visible,.ss-go:focus-visible,.ss-sso:focus-visible,.ss-check input:focus-visible{outline:2px solid var(--ss-ink);outline-offset:2px}
.ss-right{flex:1;display:none;flex-direction:column;justify-content:center;gap:34px;background:var(--ss-ink);color:#e2e8f0;padding:64px}
.ss-stats{display:flex;gap:36px}
.ss-stats b{display:block;font-size:1.9rem;color:#fff;letter-spacing:-.02em}
.ss-stats span{font-size:.85rem;color:#94a3b8}
.ss-right blockquote{font-size:1.15rem;line-height:1.6;color:#f1f5f9;max-width:44ch}
.ss-who{display:flex;align-items:center;gap:12px;font-size:.9rem;color:#94a3b8}
.ss-who i{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#818cf8)}
.ss-who b{color:#e2e8f0;display:block}
@media (min-width:960px){.ss-right{display:flex}}
@media (prefers-reduced-motion:reduce){.ss-input,.ss-go,.ss-sso{transition:none}}
JavaScript 
// Show / hide password. The button keeps one name ("Show password") and reports its state with aria-pressed.
document.querySelectorAll('[data-peek]').forEach(function (btn) {
  var input = document.getElementById(btn.getAttribute('aria-controls'));
  btn.addEventListener('click', function () {
    var show = input.type === 'password';
    input.type = show ? 'text' : 'password';
    btn.setAttribute('aria-pressed', String(show));
  });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="ss d-flex">
  <main class="ss-left d-flex flex-column justify-content-center mx-auto">
    <div class="ss-logo d-flex align-items-center gap-2"><i class="d-inline-block" aria-hidden="true"></i>Meridian</div>
    <h1>Log in to your account</h1>
    <p class="ss-sub text-body-secondary">Welcome back. Your dashboards missed you.</p>
    <form action="#" method="post" onsubmit="event.preventDefault()">
      <label class="form-label" for="ss-email">Work email</label>
      <div class="ss-field"><input class="form-control" type="email" id="ss-email" name="email" placeholder="[email protected]" autocomplete="username" required></div>
      <label class="form-label" for="ss-password">Password</label>
      <div class="ss-field position-relative">
        <input class="form-control has-peek" type="password" id="ss-password" name="password" placeholder="Enter your password" autocomplete="current-password" required>
        <button type="button" class="btn ss-peek position-absolute" data-peek aria-controls="ss-password" aria-pressed="false" aria-label="Show password"><svg class="ss-on" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11.5A4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 0 1 0 9zm0-7a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/></svg><svg class="ss-off" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.3 2 2 3.3l3.1 3.1C3.1 8.1 2 10.6 2 12c0 0 3 7 10 7 2 0 3.7-.6 5.1-1.4l3.6 3.6 1.3-1.3L3.3 2zM12 16.5A4.5 4.5 0 0 1 7.5 12c0-.8.2-1.5.6-2.2l1.5 1.5a2.5 2.5 0 0 0 3.1 3.1l1.5 1.5c-.7.4-1.4.6-2.2.6zm0-11.5c-1.3 0-2.5.2-3.5.6l1.7 1.7c.6-.2 1.2-.3 1.8-.3a4.5 4.5 0 0 1 4.5 4.5c0 .6-.1 1.2-.3 1.8l2.9 2.9C21.1 14.3 22 12 22 12s-3-7-10-7z"/></svg></button>
      </div>
      <div class="ss-row d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div class="form-check d-flex align-items-center gap-2 ps-0 mb-0">
          <input class="form-check-input m-0" type="checkbox" id="ss-remember" name="remember">
          <label class="form-check-label fw-medium" for="ss-remember">Keep me signed in</label>
        </div>
        <a href="#">Forgot password?</a>
      </div>
      <button class="btn btn-ss w-100" type="submit">Sign in</button>
      <button class="btn btn-sso w-100" type="button">Sign in with SSO</button>
    </form>
    <p class="ss-foot text-body-secondary mb-0">Don’t have an account? <a href="#">Start a free trial</a></p>
  </main>
  <aside class="ss-right d-none flex-column justify-content-center">
    <div class="ss-stats d-flex">
      <div><b>28k+</b><span>teams on board</span></div>
      <div><b>99.99%</b><span>uptime last year</span></div>
      <div><b>4.8/5</b><span>average rating</span></div>
    </div>
    <blockquote class="mb-0">“We moved three tools into Meridian in a week. Reporting that used to take Fridays now takes minutes.”</blockquote>
    <div class="ss-who d-flex align-items-center gap-3"><i class="rounded-circle" aria-hidden="true"></i><span><b class="d-block">Priya Natarajan</b>Head of Analytics, Corvid</span></div>
  </aside>
</div>
CSS 
/* Bootstrap .form-control, .form-check and two .btn styles, with the proof panel shown from 960px. */
.ss{--ss-ink:#0f172a;--ss-slate:#334155;
  --bs-body-color:#0f172a;--bs-secondary-color:#64748b;--bs-border-color:#8a94a6;
  --bs-body-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;background:#fff;color:var(--bs-body-color);font-family:var(--bs-body-font-family);line-height:normal}
.ss-left{flex:1;padding:48px;max-width:560px}
.ss-logo{font-weight:800;font-size:1.05rem;margin-bottom:44px}
.ss-logo i{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--ss-slate),var(--ss-ink))}
.ss h1{font-size:1.7rem;letter-spacing:-.02em;font-weight:700;margin-bottom:6px}
.ss-sub{font-size:.95rem;margin-bottom:30px}
.ss .form-label{font-size:.85rem;font-weight:600;margin-bottom:6px}
.ss-field{margin-bottom:18px}
.ss .form-control{padding:12px 14px;border-radius:10px;font-size:.95rem;line-height:1.2}
.ss .form-control.has-peek{padding-right:48px}
.ss .form-control::placeholder{color:var(--bs-secondary-color)}
.ss .form-control:focus{border-color:var(--ss-slate);box-shadow:0 0 0 3px rgba(51,65,85,.2)}
.ss-peek{top:50%;right:8px;transform:translateY(-50%);--bs-btn-padding-x:6px;--bs-btn-padding-y:6px;--bs-btn-border-width:0;--bs-btn-border-radius:6px;
  --bs-btn-color:var(--bs-secondary-color);--bs-btn-hover-color:var(--ss-slate);--bs-btn-active-color:var(--ss-slate);--bs-btn-focus-box-shadow:none;line-height:0}
.ss-peek[aria-pressed="true"]{color:var(--ss-slate)}
.ss-peek svg{width:19px;height:19px;fill:currentColor}
.ss-peek .ss-off,.ss-peek[aria-pressed="true"] .ss-on{display:none}
.ss-peek[aria-pressed="true"] .ss-off{display:block}
.ss-row{font-size:.87rem;margin-bottom:24px}
.ss .form-check{min-height:0}
.ss .form-check-input{width:16px;height:16px;margin-top:0;border-color:#767676}
.ss .form-check-input:checked{background-color:var(--ss-ink);border-color:var(--ss-ink)}
.ss .form-check-input:focus{box-shadow:none;border-color:#767676}
.ss .form-check-label{color:#475569}
.ss a{color:var(--ss-ink);font-weight:600;text-decoration:none;border-radius:3px}
.ss a:hover{text-decoration:underline}
.ss .btn-ss,.ss .btn-sso{--bs-btn-border-radius:10px;--bs-btn-line-height:1.2;--bs-btn-focus-box-shadow:none}
.ss .btn-ss{--bs-btn-bg:var(--ss-ink);--bs-btn-border-color:var(--ss-ink);--bs-btn-color:#fff;--bs-btn-hover-bg:#1e293b;--bs-btn-hover-border-color:#1e293b;
  --bs-btn-hover-color:#fff;--bs-btn-active-bg:#1e293b;--bs-btn-active-border-color:#1e293b;--bs-btn-active-color:#fff;--bs-btn-padding-y:13px;
  --bs-btn-font-size:.95rem;--bs-btn-font-weight:700}
.ss .btn-sso{--bs-btn-bg:#fff;--bs-btn-border-color:#8a94a6;--bs-btn-color:var(--ss-ink);--bs-btn-hover-bg:#f8fafc;--bs-btn-hover-border-color:#8a94a6;
  --bs-btn-hover-color:var(--ss-ink);--bs-btn-active-bg:#f8fafc;--bs-btn-active-border-color:#8a94a6;--bs-btn-active-color:var(--ss-ink);
  --bs-btn-padding-y:12px;--bs-btn-font-size:.92rem;--bs-btn-font-weight:600;margin-top:12px}
.ss-foot{margin-top:26px;font-size:.9rem}
.ss-foot a{font-weight:700}
.ss a:focus-visible,.ss .btn:focus-visible,.ss .form-check-input:focus-visible{outline:2px solid var(--ss-ink);outline-offset:2px}
.ss-right{flex:1;gap:34px;background:var(--ss-ink);color:#e2e8f0;padding:64px}
.ss-stats{gap:36px}
.ss-stats b{display:block;font-size:1.9rem;color:#fff;letter-spacing:-.02em}
.ss-stats span{font-size:.85rem;color:#94a3b8}
.ss-right blockquote{font-size:1.15rem;line-height:1.6;color:#f1f5f9;max-width:44ch}
.ss-who{font-size:.9rem;color:#94a3b8}
.ss-who i{width:40px;height:40px;background:linear-gradient(135deg,#38bdf8,#818cf8)}
.ss-who b{color:#e2e8f0}
@media (min-width:960px){.ss-right{display:flex!important}}
@media (prefers-reduced-motion:reduce){.ss .form-control,.ss .btn{transition:none}}
JavaScript 
// Show / hide password. The button keeps one name ("Show password") and reports its state with aria-pressed.
document.querySelectorAll('[data-peek]').forEach(function (btn) {
  var input = document.getElementById(btn.getAttribute('aria-controls'));
  btn.addEventListener('click', function () {
    var show = input.type === 'password';
    input.type = show ? 'text' : 'password';
    btn.setAttribute('aria-pressed', String(show));
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="flex min-h-screen bg-white font-[-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,Helvetica,Arial,sans-serif] leading-[normal] text-ss-ink">
  <main class="mx-auto flex max-w-[560px] flex-1 flex-col justify-center p-12">
    <div class="mb-11 flex items-center gap-2.5 text-[1.05rem] font-extrabold"><i class="inline-block size-[30px] rounded-lg bg-linear-135 from-ss-slate to-ss-ink" aria-hidden="true"></i>Meridian</div>
    <h1 class="mb-1.5 text-[1.7rem] font-bold tracking-[-.02em]">Log in to your account</h1>
    <p class="mb-[30px] text-[.95rem] text-ss-muted">Welcome back. Your dashboards missed you.</p>
    <form action="#" method="post" onsubmit="event.preventDefault()">
      <label class="mb-1.5 block text-[.85rem] font-semibold" for="ss-email">Work email</label>
      <div class="relative mb-[18px]"><input class="block w-full rounded-[10px] border border-ss-line bg-white px-3.5 py-3 text-[.95rem] transition-[border-color,box-shadow] duration-150 placeholder:text-ss-muted focus:border-ss-slate focus:shadow-[0_0_0_3px_rgba(51,65,85,.2)] focus:outline-none motion-reduce:transition-none" type="email" id="ss-email" name="email" placeholder="[email protected]" autocomplete="username" required></div>
      <label class="mb-1.5 block text-[.85rem] font-semibold" for="ss-password">Password</label>
      <div class="relative mb-[18px]">
        <input class="block w-full rounded-[10px] border border-ss-line bg-white px-3.5 py-3 text-[.95rem] transition-[border-color,box-shadow] duration-150 placeholder:text-ss-muted focus:border-ss-slate focus:shadow-[0_0_0_3px_rgba(51,65,85,.2)] focus:outline-none motion-reduce:transition-none pr-12" type="password" id="ss-password" name="password" placeholder="Enter your password" autocomplete="current-password" required>
        <button type="button" class="group absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer rounded-md p-1.5 text-ss-muted hover:text-ss-slate aria-pressed:text-ss-slate focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ss-ink" data-peek aria-controls="ss-password" aria-pressed="false" aria-label="Show password"><svg class="size-[19px] fill-current group-aria-pressed:hidden" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 11.5A4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 0 1 0 9zm0-7a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z"/></svg><svg class="hidden size-[19px] fill-current group-aria-pressed:block" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.3 2 2 3.3l3.1 3.1C3.1 8.1 2 10.6 2 12c0 0 3 7 10 7 2 0 3.7-.6 5.1-1.4l3.6 3.6 1.3-1.3L3.3 2zM12 16.5A4.5 4.5 0 0 1 7.5 12c0-.8.2-1.5.6-2.2l1.5 1.5a2.5 2.5 0 0 0 3.1 3.1l1.5 1.5c-.7.4-1.4.6-2.2.6zm0-11.5c-1.3 0-2.5.2-3.5.6l1.7 1.7c.6-.2 1.2-.3 1.8-.3a4.5 4.5 0 0 1 4.5 4.5c0 .6-.1 1.2-.3 1.8l2.9 2.9C21.1 14.3 22 12 22 12s-3-7-10-7z"/></svg></button>
      </div>
      <div class="mb-6 flex flex-wrap items-center justify-between gap-2.5 text-[.87rem]">
        <label class="flex cursor-pointer items-center gap-[7px] font-medium text-[#475569]"><input class="size-4 accent-ss-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ss-ink" type="checkbox" name="remember"> Keep me signed in</label>
        <a class="rounded-[3px] font-semibold hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ss-ink" href="#">Forgot password?</a>
      </div>
      <button class="w-full cursor-pointer rounded-[10px] bg-ss-ink p-[13px] text-[.95rem] font-bold text-white transition-colors duration-150 hover:bg-[#1e293b] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ss-ink motion-reduce:transition-none" type="submit">Sign in</button>
      <button class="mt-3 w-full cursor-pointer rounded-[10px] border border-ss-line bg-white p-3 text-[.92rem] font-semibold transition-colors duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ss-ink motion-reduce:transition-none" type="button">Sign in with SSO</button>
    </form>
    <p class="mt-[26px] text-[.9rem] text-ss-muted">Don’t have an account? <a class="rounded-[3px] font-bold text-ss-ink hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ss-ink" href="#">Start a free trial</a></p>
  </main>
  <aside class="hidden flex-1 flex-col justify-center gap-[34px] bg-ss-ink p-16 text-[#e2e8f0] min-[960px]:flex">
    <div class="flex gap-9">
      <div><b class="block text-[1.9rem] tracking-[-.02em] text-white">28k+</b><span class="text-[.85rem] text-[#94a3b8]">teams on board</span></div>
      <div><b class="block text-[1.9rem] tracking-[-.02em] text-white">99.99%</b><span class="text-[.85rem] text-[#94a3b8]">uptime last year</span></div>
      <div><b class="block text-[1.9rem] tracking-[-.02em] text-white">4.8/5</b><span class="text-[.85rem] text-[#94a3b8]">average rating</span></div>
    </div>
    <blockquote class="max-w-[44ch] text-[1.15rem] leading-[1.6] text-[#f1f5f9]">“We moved three tools into Meridian in a week. Reporting that used to take Fridays now takes minutes.”</blockquote>
    <div class="flex items-center gap-3 text-[.9rem] text-[#94a3b8]"><i class="size-10 rounded-full bg-linear-135 from-[#38bdf8] to-[#818cf8]" aria-hidden="true"></i><span><b class="block text-[#e2e8f0]">Priya Natarajan</b>Head of Analytics, Corvid</span></div>
  </aside>
</div>
CSS 
@theme {
  --color-ss-ink: #0f172a;
  --color-ss-muted: #64748b;
  --color-ss-line: #8a94a6;
  --color-ss-slate: #334155;
}
JavaScript 
// Show / hide password. The button keeps one name ("Show password") and reports its state with aria-pressed.
document.querySelectorAll('[data-peek]').forEach(function (btn) {
  var input = document.getElementById(btn.getAttribute('aria-controls'));
  btn.addEventListener('click', function () {
    var show = input.type === 'password';
    input.type = show ? 'text' : 'password';
    btn.setAttribute('aria-pressed', String(show));
  });
});

About this set

A two-column sign-in page for business software. The left column holds the logo, a heading, a work email field, a password field with an eye icon that shows or hides the password, a Keep me signed in checkbox, a Forgot password link, a dark Sign in button and a secondary Sign in with SSO button, followed by a free trial link. From 960 pixels wide a dark navy panel appears on the right with three headline stats, a customer quote and the person’s name and role. Use it for B2B products where teams sign in with single sign-on and the login page doubles as social proof. The eye button is a real toggle named Show password with aria-pressed, and its icon switches to a crossed-out eye while the password is visible. The icon colour was darkened so it reaches 3:1 against white, and field borders were darkened to match. The Bootstrap version uses .form-control, .form-check and two .btn styles; the Tailwind version swaps the eye icons with group-aria-pressed: utilities.

What’s included

  • Show password icon button with aria-pressed and swapping icon
  • Sign in with SSO as a secondary action
  • Stats and testimonial panel shown from 960px
  • Keep me signed in checkbox and Forgot password link
  • Icon and border colours adjusted to 3:1

Accessibility

Every field has a visible label and the checkbox sits inside its label. The password toggle has a fixed accessible name, Show password, and reports its state with aria-pressed. Inputs show a slate border and ring on focus; buttons, links and the checkbox show a 2px outline on keyboard focus. Transitions switch off under prefers-reduced-motion.

Customise it

Change --ss-ink, --ss-slate, --ss-muted and --ss-line on .ss. In Tailwind edit the --color-ss-* theme colours, and the min-[960px]:flex breakpoint on the aside.