Split-screen with visual

Build a full-height split-screen sign-in page with Tailwind CSS. On the left, a centered login card (~360px wide) with a logo, an email and password field, a "Remember me" checkbox with a "Forgot password?" link on the same row, a full-width primary button, and a divider before a "Continue with Google" outline button. On the right half, a solid brand-colored panel with a large headline and a short testimonial, hidden below the lg breakpoint. Use rounded-xl inputs, subtle borders, and clear focus rings.

<div class="flex min-h-screen">
  <!-- Form -->
  <div class="flex w-full items-center justify-center px-6 lg:w-1/2">
    <div class="w-full max-w-sm">
      <div class="mb-8">
        <div class="mb-6 h-9 w-9 rounded-lg bg-neutral-900"></div>
        <h1 class="text-2xl font-semibold text-neutral-900">Welcome back</h1>
        <p class="mt-1 text-sm text-neutral-500">Sign in to continue to your account.</p>
      </div>
      <form class="space-y-4">
        <div>
          <label class="mb-1.5 block text-sm font-medium text-neutral-700">Email</label>
          <input type="email" placeholder="[email protected]"
            class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none ring-neutral-900/10 focus:border-neutral-900 focus:ring-4" />
        </div>
        <div>
          <label class="mb-1.5 block text-sm font-medium text-neutral-700">Password</label>
          <input type="password" placeholder="••••••••"
            class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none ring-neutral-900/10 focus:border-neutral-900 focus:ring-4" />
        </div>
        <div class="flex items-center justify-between text-sm">
          <label class="flex items-center gap-2 text-neutral-600">
            <input type="checkbox" class="rounded border-neutral-300" /> Remember me
          </label>
          <a href="#" class="font-medium text-neutral-900 hover:underline">Forgot password?</a>
        </div>
        <button class="w-full rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Sign in</button>
      </form>
      <div class="my-6 flex items-center gap-3 text-xs text-neutral-400">
        <span class="h-px flex-1 bg-neutral-200"></span>OR<span class="h-px flex-1 bg-neutral-200"></span>
      </div>
      <button class="w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Continue with Google</button>
    </div>
  </div>
  <!-- Visual -->
  <div class="hidden bg-neutral-900 lg:flex lg:w-1/2 lg:flex-col lg:justify-end lg:p-14">
    <blockquote class="max-w-md text-2xl font-medium leading-snug text-white">
      "This is the fastest we've ever shipped a product. It just works."
    </blockquote>
    <p class="mt-4 text-sm text-neutral-400">Alex Rivera — CTO, Northwind</p>
  </div>
</div>