Auth Lab · Visual Playground

1. Split Screen — brand on the left, form on the right

nebula.

Welcome back.

Sign in to your workspace and pick up where you left off.

Sign in

Enter your email and password.

<section class="auth-split">
  <div class="brand">
    <h2>Welcome back.</h2>
  </div>
  <div class="form-side">
    <form>
      <input type="email">
      <input type="password">
      <button>Sign in</button>
    </form>
  </div>
</section>
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* Brand side — colorful gradient mesh */
.brand {
  background:
    radial-gradient(circle at 30% 30%, rgba(236,72,153,.25), transparent 50%),
    #0b0b14;
  color: #fff;
}

/* Stack on mobile */
@media (max-width: 700px) {
  .auth-split { grid-template-columns: 1fr; }
}

2. Minimal Card — centered, card + logo emoji

✨

Sign in to your account

We'll send a magic link to your inbox.

No account yet? Create one

<div class="card">
  <h3>Sign in to your account</h3>
  <form>
    <input type="email">
    <button>Send magic link</button>
  </form>
</div>
.card {
  max-width: 380px;
  background: #fff;
  padding: 36px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

3. Social Sign-in — OAuth providers + email divider

Create your account

Start your 14-day free trial — no credit card required.

or continue with email

By signing up you agree to our Terms and Privacy.

Already have an account? Sign in

<div class="social-row">
  <button class="social"><i class="ph ph-google-logo"></i> Google</button>
  <button class="social"><i class="ph ph-github-logo"></i> GitHub</button>
</div>

<div class="div">or continue with email</div>
.social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Divider: horizontal line with "or" text in the middle */
.div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #888;
}

.div::before, .div::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eee;
}

4. Dark Mode — glass card on a colorful gradient mesh background

Log in

Welcome back to the future.

Don't have an account? Sign up

<div class="card">
  <h3>Log in</h3>
  <form>...</form>
</div>
/* Glassmorphic card over gradient bg */
.card {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  padding: 36px;
  border-radius: 16px;
}

input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
}

.primary {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

5. Sign Up — two-column name fields + password strength meter

Create your account

Free forever for personal use.

Already have an account? Sign in

<div class="two">
  <input placeholder="First name">
  <input placeholder="Last name">
</div>

<div class="strength">
  <div></div><div></div><div></div><div></div>
  <small>Strong</small>
</div>
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Password strength bars — fill based on length */
.strength {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.strength div {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
}

/* JS adds classes for weak/fair/good/strong */
.strength div:nth-child(-n+3) { background: #10b981; }

6. Password Reset — simple, reassuring email-send flow

Reset your password

Enter the email you signed up with. We'll send you a secure link to reset your password.

← Back to sign in

<div class="card">
  <div class="icon">📧</div>
  <h3>Reset your password</h3>
  <form>
    <input type="email">
    <button>Send reset link</button>
  </form>
</div>
.card {
  max-width: 400px;
  text-align: center;
  padding: 36px;
}

/* Tinted icon circle — signals "email related" */
.icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(236, 72, 153, .1);
  color: #ec4899;
}

7. 2FA Code — six-box verification input for authenticator apps

Verify it's you

Enter the 6-digit code from your authenticator app.

Didn't get a code? Resend

<div class="code-row">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
  <!-- 6 total -->
</div>
.code-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.code-row input {
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
}

.code-row input:focus {
  outline: none;
  border-color: #10b981;
}