<section class="rounded-xl border bg-card text-card-foreground shadow-xs" data-resizable-preview>
  <header class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <div class="min-w-0">
      <p class="text-sm font-medium">Authentication block preview</p>
      <p class="text-xs text-muted-foreground">Resize the frame to check the split layout as it collapses toward mobile widths.</p>
    </div>
    <div class="ms-auto flex flex-wrap items-center gap-2">
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="375">Mobile</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="768">Tablet</button>
      <button type="button" class="btn" data-variant="outline" data-size="sm" data-preview-preset="960">Desktop</button>
      <button type="button" class="btn" data-variant="ghost" data-size="sm" data-preview-preset="1280">Full</button>
    </div>
  </header>
  <div class="flex flex-wrap items-center gap-3 border-b px-4 py-3">
    <label class="text-xs font-medium text-muted-foreground" for="auth-block-range">Width</label>
    <input id="auth-block-range" class="w-full min-w-40 flex-1 accent-primary" type="range" min="360" max="1280" value="960" data-preview-range />
    <output class="rounded-md bg-muted px-2.5 py-1 font-mono text-xs tabular-nums" data-preview-output>960px</output>
  </div>
  <div class="overflow-x-auto bg-muted/30 p-4 md:p-6">
    <div class="mx-auto w-full max-w-full overflow-hidden rounded-xl border bg-background shadow-sm transition-[width] duration-150" data-preview-viewport>
      <div class="w-full p-4 md:p-6">
<section class="grid min-h-[42rem] overflow-hidden rounded-[calc(var(--radius-xl)+4px)] border lg:grid-cols-[0.95fr_1.05fr]">
  <article class="relative hidden border-e bg-muted/40 p-8 lg:flex lg:flex-col lg:justify-between">
    <div>
      <span class="badge" data-variant="secondary">Authentication</span>
      <h2 class="mt-4 text-3xl font-semibold tracking-tight">Welcome back to your workspace.</h2>
      <p class="mt-3 max-w-md text-sm text-muted-foreground">Use this block for sign-in, invite acceptance, or gated product entry points.</p>
    </div>
    <div class="grid gap-4">
      <div class="rounded-xl border bg-background/80 p-4">
        <p class="text-sm font-medium">Trusted by modern product teams</p>
        <p class="mt-2 text-sm text-muted-foreground">Responsive, semantic, and easy to copy into non-React stacks.</p>
      </div>
      <div class="grid grid-cols-3 gap-3">
        <div class="rounded-xl border bg-background/80 p-4 text-center"><p class="text-2xl font-semibold">99.9%</p><p class="text-xs text-muted-foreground">Uptime</p></div>
        <div class="rounded-xl border bg-background/80 p-4 text-center"><p class="text-2xl font-semibold">12k</p><p class="text-xs text-muted-foreground">Teams</p></div>
        <div class="rounded-xl border bg-background/80 p-4 text-center"><p class="text-2xl font-semibold">8</p><p class="text-xs text-muted-foreground">Style packs</p></div>
      </div>
    </div>
  </article>
  <article class="flex min-h-full items-center justify-center p-5 sm:p-8 lg:p-10">
    <div class="w-full max-w-md space-y-6">
      <header class="space-y-3 text-center lg:text-left">
        <div class="space-y-3 lg:hidden">
          <span class="badge" data-variant="secondary">Authentication</span>
          <div class="space-y-2">
            <h2 class="text-2xl font-semibold tracking-tight">Welcome back to your workspace.</h2>
            <p class="text-sm text-muted-foreground">Use this block for sign-in, invite acceptance, or gated product entry points.</p>
          </div>
        </div>
        <h2 class="text-2xl font-semibold tracking-tight">Sign in</h2>
        <p class="text-sm text-muted-foreground">Enter your email below to sign in to your account.</p>
      </header>
      <section class="space-y-4">
        <label class="field">
          <span>Email</span>
          <input class="input" type="email" placeholder="name@example.com" />
        </label>
        <label class="field">
          <div class="flex items-center justify-between gap-3">
            <span>Password</span>
            <a href="#" class="text-sm underline underline-offset-4">Forgot password?</a>
          </div>
          <input class="input" type="password" placeholder="••••••••" />
        </label>
        <button type="button" class="btn w-full">Sign in</button>
        <button type="button" class="btn w-full" data-variant="outline">Continue with GitHub</button>
      </section>
      <div class="field-separator"><span>Or continue with</span></div>
      <div class="grid gap-3 sm:grid-cols-2">
        <button type="button" class="btn" data-variant="outline">Google</button>
        <button type="button" class="btn" data-variant="outline">Microsoft</button>
      </div>
      <p class="text-center text-sm text-muted-foreground lg:text-left">Don't have an account? <a href="#" class="underline underline-offset-4">Sign up</a></p>
    </div>
  </article>
</section>
      </div>
    </div>
  </div>
</section>