Account Hint Login Tile

An account hint login tile built with pure HTML and CSS that displays recognizable user identity cues such as avatar, email preview, or username hint. It enhances login context awareness and authentication clarity without requiring JavaScript.

Usage

Use this component when interfaces require pre-identified account confirmation, such as returning user login screens, multi account systems, or device based authentication flows.

Implementation

The layout uses a card based tile structure with grouped identity elements and input fields. CSS controls spacing, alignment, and focus styling to maintain clarity and responsiveness across screen sizes.

HTML

<section class="login-hint">
  <span class="login-hint__label">Continue as</span>
  <strong class="login-hint__user">Elsie@company.com</strong>
  <button class="login-hint__action">Continue</button>
</section>

<section class="login-hint">
  <span class="login-hint__label">Continue as</span>
  <strong class="login-hint__user">Elsie@company.com</strong>
  <button class="login-hint__action">Continue</button>
</section>

CSS

.login-hint {
  width: 200px;
  padding: 0.85rem;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(0,0,0,0.14);
  text-align: center;
  display: grid;
  gap: 0.35rem;
}

.login-hint__label {
  font-size: 11px;
  color: #6b7280;
}

.login-hint__user {
  font-size: 13px;
  color: #111827;
  font-weight: 600;
}

.login-hint__action {
  margin-top: 0.25rem;
  padding: 0.4rem;
  border-radius: 999px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease;
}

.login-hint__action:hover {
  transform: translateY(-1px);
}

@media (prefers-color-scheme: dark) {
  .login-hint {
    background: #020617;
  }
  .login-hint__label {
    color: #9ca3af;
  }
  .login-hint__user {
    color: #e5e7eb;
  }
}

.login-hint {
  width: 200px;
  padding: 0.85rem;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(0,0,0,0.14);
  text-align: center;
  display: grid;
  gap: 0.35rem;
}

.login-hint__label {
  font-size: 11px;
  color: #6b7280;
}

.login-hint__user {
  font-size: 13px;
  color: #111827;
  font-weight: 600;
}

.login-hint__action {
  margin-top: 0.25rem;
  padding: 0.4rem;
  border-radius: 999px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: transform 150ms ease;
}

.login-hint__action:hover {
  transform: translateY(-1px);
}

@media (prefers-color-scheme: dark) {
  .login-hint {
    background: #020617;
  }
  .login-hint__label {
    color: #9ca3af;
  }
  .login-hint__user {
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Displays user identity hints clearly
• Enhances account recognition visibility
• Fully responsive across breakpoints
• Suitable for SaaS and dashboard login flows
• Easy to customize avatar and identity 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.