Session Re-Authentication Panel

A session re-authentication panel built with pure HTML and CSS that prompts users to reconfirm credentials before accessing sensitive actions. It enhances security workflow clarity and structured input presentation without relying on JavaScript.

Usage

Use this component when interfaces require credential reconfirmation for secure actions, such as account settings updates, password changes, billing modifications, or administrative controls.

Implementation

The layout uses a centered panel container with structured input grouping, styled using CSS for spacing, focus states, and responsive stacking. Visual emphasis ensures the security prompt remains clear and prominent.

HTML

<section class="login-reauth">
  <p class="login-reauth__message">Session expired</p>
  <input type="password" placeholder="Password">
  <button class="login-reauth__action">Unlock</button>
</section>

<section class="login-reauth">
  <p class="login-reauth__message">Session expired</p>
  <input type="password" placeholder="Password">
  <button class="login-reauth__action">Unlock</button>
</section>

CSS

.login-reauth {
  width: 200px;
  padding: 0.75rem;
  border-radius: 18px;
  background: #ffffff;
  display: grid;
  gap: 0.4rem;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.login-reauth__message {
  font-size: 12px;
  color: #374151;
}

.login-reauth input {
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  font-size: 12px;
}

.login-reauth__action {
  margin-top: 0.2rem;
  padding: 0.4rem;
  border-radius: 999px;
  border: none;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease;
}

.login-reauth__action:hover {
  background: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
  .login-reauth {
    background: #18181b;
    border-color: #27272a;
  }

  .login-reauth__message {
    color: #d4d4d8;
  }

  .login-reauth input {
    background: #09090b;
    border-color: #3f3f46;
    color: #f4f4f5;
  }
}

.login-reauth {
  width: 200px;
  padding: 0.75rem;
  border-radius: 18px;
  background: #ffffff;
  display: grid;
  gap: 0.4rem;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.login-reauth__message {
  font-size: 12px;
  color: #374151;
}

.login-reauth input {
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  font-size: 12px;
}

.login-reauth__action {
  margin-top: 0.2rem;
  padding: 0.4rem;
  border-radius: 999px;
  border: none;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease;
}

.login-reauth__action:hover {
  background: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
  .login-reauth {
    background: #18181b;
    border-color: #27272a;
  }

  .login-reauth__message {
    color: #d4d4d8;
  }

  .login-reauth input {
    background: #09090b;
    border-color: #3f3f46;
    color: #f4f4f5;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Designed for secure re-authentication prompts
• Enhances sensitive action confirmation clarity
• Fully responsive across breakpoints
• Suitable for dashboards and account settings pages
• Easy to customize input spacing and alert styling

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.