Open demo

CSS code

HTML 
<div class="lf">
<main class="lf-box">
  <div class="lf-av" aria-hidden="true">DK</div>
  <h1>Dana Kowalski</h1>
  <p class="lf-mail">[email protected]</p>
  <p class="lf-locked"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></svg> Locked after 15 minutes idle</p>
  <form onsubmit="event.preventDefault()">
    <input type="email" name="username" autocomplete="username" value="[email protected]" hidden>
    <label class="lf-label" for="unlock">Password</label>
    <div class="lf-row">
      <input id="unlock" name="password" type="password" autocomplete="current-password" placeholder="Enter your password" required>
      <button type="submit" aria-label="Unlock">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </button>
    </div>
  </form>
  <p class="lf-links"><a href="#">Use a passkey</a><br><a href="#">Sign in as someone else</a></p>
</main>
</div>
CSS 
/* Session lock screen for a known account: avatar, name, a password field and an arrow button.
   A hidden username field carries the account so password managers fill the right password. */
.lf{--lf-accent:#6366f1;--lf-accent-dark:#4f46e5;--lf-soft:#a5b4fc;--lf-dim:#98a1bb;
  min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:28px 20px;color:#e8eaf2;
  background:radial-gradient(1100px 640px at 22% 12%,#2c3550 0%,#171c2b 46%,#0e111a 100%);line-height:normal;color-scheme:dark;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.lf,.lf *,.lf *::before,.lf *::after{box-sizing:border-box}
.lf :where(h1,p,form){margin:0}
.lf :where(input,button){font:inherit}
.lf a{color:var(--lf-soft);text-decoration:none;font-weight:600}
.lf a:hover{text-decoration:underline}
.lf :focus-visible{outline:2px solid var(--lf-soft);outline-offset:2px}
.lf-box{width:100%;max-width:360px;text-align:center}
.lf-av{width:88px;height:88px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  font-size:2rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#6366f1,#a855f7);
  box-shadow:0 0 0 5px rgba(255,255,255,.08)}
.lf h1{font-size:1.35rem;letter-spacing:-.01em;margin-bottom:5px}
.lf-mail{color:var(--lf-dim);font-size:.9rem;margin-bottom:8px}
.lf-locked{display:inline-flex;align-items:center;gap:7px;font-size:.79rem;color:#c7cddd;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  padding:5px 11px;border-radius:999px;margin-bottom:26px}
.lf-locked svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.lf-label{display:block;text-align:left;font-size:.82rem;font-weight:600;color:#c7cddd;margin-bottom:7px}
.lf-row{display:flex;gap:9px}
.lf-row input{flex:1;min-width:0;padding:13px 15px;border-radius:12px;font-size:.95rem;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.42);transition:border-color .15s,background .15s,box-shadow .15s}
.lf-row input::placeholder{color:#8b93ab}
.lf-row input:focus{outline:none;border-color:var(--lf-soft);background:rgba(255,255,255,.13);box-shadow:0 0 0 3px rgba(165,180,252,.25)}
.lf-row button{width:50px;flex-shrink:0;border:0;border-radius:12px;background:var(--lf-accent);color:#fff;
  cursor:pointer;display:grid;place-items:center;transition:background .15s}
.lf-row button:hover{background:var(--lf-accent-dark)}
.lf-row button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2}
.lf-links{margin-top:24px;font-size:.87rem;color:var(--lf-dim);line-height:2}
@media (prefers-reduced-motion:reduce){.lf-row input,.lf-row button{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="lf d-grid" data-bs-theme="dark">
<main class="lf-box w-100 text-center">
  <div class="lf-av rounded-circle" aria-hidden="true">DK</div>
  <h1>Dana Kowalski</h1>
  <p class="lf-mail">[email protected]</p>
  <p class="lf-locked d-inline-flex align-items-center rounded-pill"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></svg> Locked after 15 minutes idle</p>
  <form class="text-start" onsubmit="event.preventDefault()">
    <input type="email" name="username" autocomplete="username" value="[email protected]" hidden>
    <label class="form-label" for="unlock">Password</label>
    <div class="d-flex gap-2">
      <input class="form-control" id="unlock" name="password" type="password" autocomplete="current-password" placeholder="Enter your password" required>
      <button class="btn btn-unlock" type="submit" aria-label="Unlock">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </button>
    </div>
  </form>
  <p class="lf-links mb-0"><a href="#">Use a passkey</a><br><a href="#">Sign in as someone else</a></p>
</main>
</div>
CSS 
/* Bootstrap dark colour mode (data-bs-theme="dark") with .form-control and .btn restyled through CSS variables.
   A hidden username field carries the account so password managers fill the right password. */
.lf{--lf-accent:#6366f1;--lf-accent-dark:#4f46e5;--lf-soft:#a5b4fc;--lf-dim:#98a1bb;
  --bs-body-color:#e8eaf2;--bs-link-color-rgb:165,180,252;--bs-link-hover-color-rgb:165,180,252;
  min-height:100vh;grid-template-columns:minmax(0,1fr);place-items:center;padding:28px 20px;color:#e8eaf2;line-height:normal;
  background:radial-gradient(1100px 640px at 22% 12%,#2c3550 0%,#171c2b 46%,#0e111a 100%)}
.lf a{font-weight:600;text-decoration:none}
.lf a:hover{text-decoration:underline}
.lf :focus-visible{outline:2px solid var(--lf-soft);outline-offset:2px}
.lf-box{max-width:360px}
.lf-av{width:88px;height:88px;margin:0 auto 18px;display:grid;place-items:center;font-size:2rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#6366f1,#a855f7);box-shadow:0 0 0 5px rgba(255,255,255,.08)}
.lf h1{font-size:1.35rem;font-weight:700;line-height:normal;letter-spacing:-.01em;margin-bottom:5px}
.lf-mail{color:var(--lf-dim);font-size:.9rem;margin-bottom:8px}
.lf-locked{gap:7px;font-size:.79rem;color:#c7cddd;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:5px 11px;margin-bottom:26px}
.lf-locked svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.lf .form-label{font-size:.82rem;font-weight:600;color:#c7cddd;margin-bottom:7px}
.lf .form-control{padding:13px 15px;border-radius:12px;font-size:.95rem;line-height:normal;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.42);transition:border-color .15s,background-color .15s,box-shadow .15s}
.lf .form-control::placeholder{color:#8b93ab}
.lf .form-control:focus{outline:none;color:#fff;border-color:var(--lf-soft);background:rgba(255,255,255,.13);box-shadow:0 0 0 3px rgba(165,180,252,.25)}
.lf .btn-unlock{--bs-btn-padding-x:0;--bs-btn-border-radius:12px;--bs-btn-border-width:0;--bs-btn-bg:var(--lf-accent);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--lf-accent-dark);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--lf-accent-dark);--bs-btn-active-color:#fff;
  --bs-btn-focus-box-shadow:none;width:50px;flex-shrink:0;display:grid;place-items:center;transition:background-color .15s}
.lf .btn-unlock svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2}
.lf-links{margin-top:24px;font-size:.87rem;color:var(--lf-dim);line-height:2}
@media (prefers-reduced-motion:reduce){.lf .form-control,.lf .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="grid min-h-screen grid-cols-[minmax(0,1fr)] place-items-center bg-[radial-gradient(1100px_640px_at_22%_12%,#2c3550_0%,#171c2b_46%,#0e111a_100%)] px-5 py-7 font-[-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,Helvetica,Arial,sans-serif] leading-[normal] text-[#e8eaf2] scheme-dark">
<main class="w-full max-w-[360px] text-center">
  <div class="mx-auto mb-[18px] grid size-[88px] place-items-center rounded-full bg-linear-135 from-[#6366f1] to-[#a855f7] text-[2rem] font-extrabold text-white shadow-[0_0_0_5px_rgba(255,255,255,.08)]" aria-hidden="true">DK</div>
  <h1 class="mb-[5px] text-[1.35rem] font-bold tracking-[-.01em]">Dana Kowalski</h1>
  <p class="mb-2 text-[.9rem] text-dim">[email protected]</p>
  <p class="mb-[26px] inline-flex items-center gap-[7px] rounded-full border border-white/10 bg-white/7 px-[11px] py-[5px] text-[.79rem] text-pale"><svg class="size-[13px] fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></svg> Locked after 15 minutes idle</p>
  <form onsubmit="event.preventDefault()">
    <input type="email" name="username" autocomplete="username" value="[email protected]" hidden>
    <label class="mb-[7px] block text-left text-[.82rem] font-semibold text-pale" for="unlock">Password</label>
    <div class="flex gap-[9px]">
      <input class="min-w-0 flex-1 rounded-xl border border-white/42 bg-white/8 px-[15px] py-[13px] text-[.95rem] text-white transition-[border-color,background-color,box-shadow] duration-150 placeholder:text-[#8b93ab] focus:border-soft focus:bg-white/13 focus:shadow-[0_0_0_3px_rgba(165,180,252,.25)] focus:outline-none motion-reduce:transition-none"
             id="unlock" name="password" type="password" autocomplete="current-password" placeholder="Enter your password" required>
      <button class="grid w-[50px] shrink-0 cursor-pointer place-items-center rounded-xl bg-accent text-white transition-[background-color,border-color,color] duration-150 hover:bg-accent-dark focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-soft motion-reduce:transition-none" type="submit" aria-label="Unlock">
        <svg class="size-[19px] fill-none stroke-current stroke-[2.2]" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </button>
    </div>
  </form>
  <p class="mt-6 text-[.87rem] leading-[2] text-dim"><a class="font-semibold text-soft hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-soft" href="#">Use a passkey</a><br><a class="font-semibold text-soft hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-soft" href="#">Sign in as someone else</a></p>
</main>
</div>
CSS 
@theme {
  --color-accent: #6366f1;
  --color-accent-dark: #4f46e5;
  --color-soft: #a5b4fc;
  --color-dim: #98a1bb;
  --color-pale: #c7cddd;
}

About this set

A lock screen for a known account that has been idle, the kind shown by admin panels and internal tools after a timeout. On a dark radial-gradient background it shows a gradient avatar with initials, the person’s name and email, and a pill saying the session locked after 15 minutes idle. Below sit a labelled password field with a square arrow button that submits, and two links: use a passkey, or sign in as someone else. Use it when you know who was signed in and only need them to confirm with their password. A hidden username input carries the email, so password managers pick the matching saved password instead of offering every account. The layout is a single centred column with no card, which keeps it readable on small phones. In Bootstrap the page uses the dark colour mode with .form-control and .btn restyled through their variables; the Tailwind version uses the white opacity utilities and a small theme.

What’s included

  • Avatar, name, email and idle notice for a known account
  • Hidden username field so password managers fill the right password
  • Password field with an icon-only submit button named Unlock
  • Field border raised to 42% white so the edge reaches 3:1
  • Passkey and switch-account links

Accessibility

The password field has a visible Password label (the original relied on the placeholder), and the arrow button is named Unlock. Focus shows a light indigo ring on the field and a 2px outline on the button and links, visible against the dark background. Transitions are removed under prefers-reduced-motion.

Customise it

Change --lf-accent, --lf-soft and --lf-dim on .lf (plain CSS and Bootstrap) or the --color-accent, --color-soft and --color-dim theme values (Tailwind). The background is the radial-gradient on .lf or the bg-[radial-gradient(...)] utility.