Open demo

CSS code

HTML 
<div class="sp">
  <aside class="sp-panel">
    <div class="sp-logo">Northwind</div>
    <div>
      <h2>Start your day with everything in one place.</h2>
      <p>Projects, docs, and conversations — organized so your team can focus on the work that matters.</p>
    </div>
    <p class="sp-quote">“The cleanest tool we have ever rolled out.” — Dana K., Ops Lead</p>
  </aside>
  <main class="sp-main">
    <form class="sp-form" action="#" method="post" onsubmit="event.preventDefault()">
      <h1>Welcome back</h1>
      <p>Sign in to continue to your workspace.</p>
      <label class="sp-label" for="sp-email">Email address</label>
      <input class="sp-input" type="email" id="sp-email" name="email" autocomplete="username" placeholder="[email protected]" required>
      <label class="sp-label" for="sp-password">Password</label>
      <input class="sp-input" type="password" id="sp-password" name="password" autocomplete="current-password" required>
      <div class="sp-row">
        <label class="sp-check"><input type="checkbox" name="remember"> Remember me</label>
        <a href="#">Forgot password?</a>
      </div>
      <button class="sp-btn" type="submit">Sign in</button>
      <p class="sp-signup">New here? <a href="#">Create an account</a></p>
    </form>
  </main>
</div>
CSS 
/* Split-screen login: a gradient brand panel (hidden under 880px) beside a plain email and password form. */
.sp{--sp-brand:#4f46e5;--sp-brand-dark:#4338ca;--sp-brand2:#7c3aed;--sp-ink:#111827;--sp-muted:#6b7280;--sp-line:#8b93a1;
  min-height:100vh;display:flex;background:#fff;color:var(--sp-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.sp h1,.sp h2,.sp p{margin:0}
.sp-panel{flex:1;display:none;flex-direction:column;justify-content:space-between;padding:56px;color:#fff;
  background:linear-gradient(135deg,var(--sp-brand),var(--sp-brand2))}
.sp-logo{font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.sp-panel h2{font-size:2.1rem;line-height:1.2;letter-spacing:-.03em;max-width:22ch}
.sp-panel p{margin-top:14px;opacity:.9;max-width:40ch;line-height:1.6}
.sp-panel .sp-quote{font-size:.9rem;opacity:.9}
.sp-main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px}
.sp-form{width:100%;max-width:380px}
.sp-form h1{font-size:1.6rem;letter-spacing:-.02em;margin-bottom:6px}
.sp-form>p{color:var(--sp-muted);font-size:.95rem;margin-bottom:28px}
.sp-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.sp-input{display:block;width:100%;padding:12px 14px;margin-bottom:18px;border:1px solid var(--sp-line);border-radius:10px;
  font:inherit;font-size:.95rem;color:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
.sp-input::placeholder{color:#6b7280}
.sp-input:focus{outline:none;border-color:var(--sp-brand);box-shadow:0 0 0 3px rgba(79,70,229,.25)}
.sp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;font-size:.85rem}
.sp-check{display:flex;align-items:center;gap:7px;font-weight:500;color:var(--sp-muted);cursor:pointer}
.sp-check input{width:16px;height:16px;margin:0;accent-color:var(--sp-brand)}
.sp a{color:var(--sp-brand);text-decoration:none;font-weight:600;border-radius:3px}
.sp a:hover{text-decoration:underline}
.sp a:focus-visible,.sp-check input:focus-visible,.sp-btn:focus-visible{outline:2px solid var(--sp-brand);outline-offset:2px}
.sp-btn{width:100%;padding:13px;border:0;border-radius:10px;background:var(--sp-brand);color:#fff;font:inherit;
  font-size:.98rem;font-weight:700;cursor:pointer;transition:background-color .15s}
.sp-btn:hover{background:var(--sp-brand-dark)}
.sp-signup{margin-top:26px!important;text-align:center;font-size:.9rem;color:var(--sp-muted)}
@media (min-width:880px){.sp-panel{display:flex}}
@media (prefers-reduced-motion:reduce){.sp-input,.sp-btn{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="sp d-flex">
  <aside class="sp-panel d-none flex-column justify-content-between text-white">
    <div class="sp-logo">Northwind</div>
    <div>
      <h2 class="mb-0">Start your day with everything in one place.</h2>
      <p class="mt-3 mb-0">Projects, docs, and conversations — organized so your team can focus on the work that matters.</p>
    </div>
    <p class="small mb-0">“The cleanest tool we have ever rolled out.” — Dana K., Ops Lead</p>
  </aside>
  <main class="sp-main d-flex align-items-center justify-content-center">
    <form class="sp-form w-100" action="#" method="post" onsubmit="event.preventDefault()">
      <h1 class="mb-1">Welcome back</h1>
      <p class="sp-sub text-body-secondary mb-4 pb-1">Sign in to continue to your workspace.</p>
      <div class="mb-3">
        <label class="form-label" for="sp-email">Email address</label>
        <input class="form-control" type="email" id="sp-email" name="email" autocomplete="username" placeholder="[email protected]" required>
      </div>
      <div class="mb-3">
        <label class="form-label" for="sp-password">Password</label>
        <input class="form-control" type="password" id="sp-password" name="password" autocomplete="current-password" required>
      </div>
      <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4 small">
        <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="sp-remember" name="remember">
          <label class="form-check-label fw-medium text-body-secondary" for="sp-remember">Remember me</label>
        </div>
        <a href="#">Forgot password?</a>
      </div>
      <button class="btn btn-sp w-100" type="submit">Sign in</button>
      <p class="sp-foot text-center text-body-secondary mt-4 mb-0">New here? <a href="#">Create an account</a></p>
    </form>
  </main>
</div>
CSS 
/* Bootstrap grid-free split layout: .d-flex panels, .form-control, .form-check and a recoloured .btn. */
.sp{--sp-brand:#4f46e5;--sp-brand-dark:#4338ca;--sp-brand2:#7c3aed;
  --bs-body-color:#111827;--bs-secondary-color:#6b7280;--bs-border-color:#8b93a1;--bs-link-color-rgb:79,70,229;--bs-link-hover-color-rgb:79,70,229;
  --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}
.sp-panel{flex:1;padding:56px;background:linear-gradient(135deg,var(--sp-brand),var(--sp-brand2))}
.sp-logo{font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.sp-panel h2{font-size:2.1rem;line-height:1.2;letter-spacing:-.03em;max-width:22ch;font-weight:700}
.sp-panel p{opacity:.9;max-width:40ch;line-height:1.6}
.sp-main{flex:1;padding:32px}
.sp-form{max-width:380px}
.sp-form h1{font-size:1.6rem;letter-spacing:-.02em;font-weight:700}
.sp .form-label{font-size:.85rem;font-weight:600;margin-bottom:6px}
.sp .form-control{padding:12px 14px;border-radius:10px;font-size:.95rem;line-height:1.2}
.sp .form-control::placeholder{color:#6b7280}
.sp .form-control:focus{border-color:var(--sp-brand);box-shadow:0 0 0 3px rgba(79,70,229,.25)}
.sp .form-check{min-height:0}
.sp .form-check-input{width:16px;height:16px;margin-top:0;border-color:#767676}
.sp .form-check-input:checked{background-color:var(--sp-brand);border-color:var(--sp-brand)}
.sp .form-check-input:focus{box-shadow:none;border-color:#767676}
.sp .form-check-input:focus-visible{outline:2px solid var(--sp-brand);outline-offset:2px}
.sp a{font-weight:600;text-decoration:none;border-radius:3px}
.sp a:hover{text-decoration:underline}
.sp a:focus-visible{outline:2px solid var(--sp-brand);outline-offset:2px}
.sp .btn-sp{--bs-btn-bg:var(--sp-brand);--bs-btn-border-color:var(--sp-brand);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--sp-brand-dark);--bs-btn-hover-border-color:var(--sp-brand-dark);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--sp-brand-dark);--bs-btn-active-border-color:var(--sp-brand-dark);--bs-btn-active-color:#fff;
  --bs-btn-padding-y:13px;--bs-btn-font-size:.98rem;--bs-btn-font-weight:700;--bs-btn-border-radius:10px;--bs-btn-line-height:1.2;
  --bs-btn-focus-box-shadow:none}
.sp .btn-sp:focus-visible{outline:2px solid var(--sp-brand);outline-offset:2px}
.sp-sub{font-size:.95rem}
.sp-foot{font-size:.9rem}
@media (min-width:880px){.sp-panel{display:flex!important}}
@media (prefers-reduced-motion:reduce){.sp .form-control,.sp .btn{transition:none}}

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-sp-ink">
  <aside class="hidden flex-1 flex-col justify-between bg-linear-135 from-sp-brand to-sp-brand2 p-14 text-white min-[880px]:flex">
    <div class="text-xl font-extrabold tracking-[-.02em]">Northwind</div>
    <div>
      <h2 class="max-w-[22ch] text-[2.1rem] leading-[1.2] font-bold tracking-[-.03em]">Start your day with everything in one place.</h2>
      <p class="mt-3.5 max-w-[40ch] leading-[1.6] opacity-90">Projects, docs, and conversations — organized so your team can focus on the work that matters.</p>
    </div>
    <p class="max-w-[40ch] text-[.9rem] opacity-90">“The cleanest tool we have ever rolled out.” — Dana K., Ops Lead</p>
  </aside>
  <main class="flex flex-1 items-center justify-center p-8">
    <form class="w-full max-w-[380px]" action="#" method="post" onsubmit="event.preventDefault()">
      <h1 class="mb-1.5 text-[1.6rem] font-bold tracking-[-.02em]">Welcome back</h1>
      <p class="mb-7 text-[.95rem] text-sp-muted">Sign in to continue to your workspace.</p>
      <label class="mb-1.5 block text-[.85rem] font-semibold" for="sp-email">Email address</label>
      <input class="mb-[18px] block w-full rounded-[10px] border border-sp-line bg-white px-3.5 py-3 text-[.95rem] transition-[border-color,box-shadow] duration-150 placeholder:text-sp-muted focus:border-sp-brand focus:shadow-[0_0_0_3px_rgba(79,70,229,.25)] focus:outline-none motion-reduce:transition-none" type="email" id="sp-email" name="email" autocomplete="username" placeholder="[email protected]" required>
      <label class="mb-1.5 block text-[.85rem] font-semibold" for="sp-password">Password</label>
      <input class="mb-[18px] block w-full rounded-[10px] border border-sp-line bg-white px-3.5 py-3 text-[.95rem] transition-[border-color,box-shadow] duration-150 focus:border-sp-brand focus:shadow-[0_0_0_3px_rgba(79,70,229,.25)] focus:outline-none motion-reduce:transition-none" type="password" id="sp-password" name="password" autocomplete="current-password" required>
      <div class="mb-[22px] flex flex-wrap items-center justify-between gap-3 text-[.85rem]">
        <label class="flex cursor-pointer items-center gap-[7px] font-medium text-sp-muted"><input class="size-4 accent-sp-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sp-brand" type="checkbox" name="remember"> Remember me</label>
        <a class="rounded-[3px] font-semibold text-sp-brand hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sp-brand" href="#">Forgot password?</a>
      </div>
      <button class="w-full cursor-pointer rounded-[10px] bg-sp-brand p-[13px] text-[.98rem] font-bold text-white transition-colors duration-150 hover:bg-sp-brand-dark focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sp-brand motion-reduce:transition-none" type="submit">Sign in</button>
      <p class="mt-[26px] text-center text-[.9rem] text-sp-muted">New here? <a class="rounded-[3px] font-semibold text-sp-brand hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sp-brand" href="#">Create an account</a></p>
    </form>
  </main>
</div>
CSS 
@theme {
  --color-sp-brand: #4f46e5;
  --color-sp-brand-dark: #4338ca;
  --color-sp-brand2: #7c3aed;
  --color-sp-ink: #111827;
  --color-sp-muted: #6b7280;
  --color-sp-line: #8b93a1;
}

About this set

A full-page sign-in screen in two halves. On the left, an indigo-to-violet gradient panel carries the product name, a headline, a short pitch and a customer quote. On the right, a plain form asks for an email address and password, with a Remember me checkbox, a Forgot password link, an indigo Sign in button and a link to create an account. Below 880 pixels the brand panel is hidden and the form takes the whole screen, so phones get a short, focused page. Use it for SaaS and workspace products where the login page is also the first thing a returning customer sees and a little marketing space is welcome. Every field has a visible label above it, the email field uses autocomplete=”username” and the password field autocomplete=”current-password”, so browsers and password managers fill them correctly. The form is front end only: the demo cancels submission, and you point the action at your own sign-in endpoint. The Bootstrap version uses .form-control, .form-check and a recoloured .btn; the Tailwind version uses a min-[880px]:flex breakpoint for the panel.

What’s included

  • Gradient brand panel with headline and quote, hidden below 880px
  • Visible labels, autocomplete="username" and "current-password"
  • Remember me checkbox and Forgot password link on one row
  • Input borders darkened to 3:1 against white
  • Plain CSS, Bootstrap 5 and Tailwind CSS 4 versions of the same design

Accessibility

Each input has a visible label tied to it with for and id, and the checkbox sits inside its label. Inputs show a coloured border and ring on focus; links, the checkbox and the button show a 2px indigo outline on keyboard focus. Transitions are removed under prefers-reduced-motion.

Customise it

Change --sp-brand, --sp-brand2 and --sp-line on .sp in plain CSS or Bootstrap. In Tailwind edit the --color-sp-* theme colours; the gradient is bg-linear-135 from-sp-brand to-sp-brand2.