<section class="grid gap-4 rounded-[32px] bg-slate-950 p-6 text-white shadow-2xl shadow-slate-950/20 lg:grid-cols-[1fr_0.9fr]">
  <div class="rounded-[28px] bg-white/5 p-5">
    <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Welcome back</p>
    <h2 class="mt-3 text-3xl font-semibold">Return to your workspace without the noise.</h2>
    <p class="mt-3 text-sm leading-6 text-slate-300">Use this split auth section when the brand needs more than a plain form on a blank screen.</p>
  </div>
  <form class="rounded-[28px] border border-white/10 bg-white p-5 text-slate-900">
    <div class="space-y-4">
      <div>
        <label class="text-sm font-medium text-slate-700" for="email">Email</label>
        <input id="email" class="mt-2 w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm outline-none" placeholder="team@company.com" type="email" />
      </div>
      <div>
        <label class="text-sm font-medium text-slate-700" for="password">Password</label>
        <input id="password" class="mt-2 w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm outline-none" placeholder="••••••••" type="password" />
      </div>
      <button class="w-full rounded-2xl bg-slate-950 px-4 py-3 text-sm font-semibold text-white" type="button">Sign in</button>
    </div>
  </form>
</section>