Split Panel Sign-in

<!--
  Form on the left in the DOM, decorative panel on the right. On mobile the panel
  is hidden (hidden md:block) - it is atmosphere, not content, so it should not
  push the form below the fold on a phone. The form column always fills the width.
-->
<div class="mx-auto grid w-full max-w-4xl overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm md:grid-cols-2 dark:border-gray-800 dark:bg-gray-950">
  <div class="p-6 sm:p-8">
    <h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Welcome back</h1>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Sign in to continue to your workspace.</p>

    <form class="mt-6 space-y-4" action="#" method="post">
      <div>
        <label for="split-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input id="split-email" name="email" type="email" autocomplete="email" required placeholder="you@company.com" class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />
      </div>
      <div>
        <label for="split-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input id="split-password" name="password" type="password" autocomplete="current-password" required placeholder="••••••••" class="mt-1.5 w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />
      </div>
      <button type="submit" class="w-full rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">Sign in</button>
    </form>
  </div>

  <!-- Decorative side panel: a CSS gradient, no external image to go stale. -->
  <div class="hidden bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-700 p-8 md:flex md:flex-col md:justify-end" aria-hidden="true">
    <p class="text-lg font-semibold text-white">Everything your team ships, in one place.</p>
    <p class="mt-2 text-sm text-blue-100">Trusted by product teams shipping every day.</p>
  </div>
</div>