Social Sign-in

<!--
  Social buttons first, then a labelled divider, then the email/password form.
  The divider is <span> text inside a flex row of <hr>-like rules - the word
  "or" must be real text, not a background image, so it survives translation.
-->
<div class="mx-auto w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-950">
  <h1 class="text-center text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Sign in</h1>

  <div class="mt-6 space-y-3">
    <button type="button" class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
      <span aria-hidden="true" class="grid h-5 w-5 place-items-center rounded-full bg-gradient-to-br from-red-500 to-yellow-500 text-[0.65rem] font-bold text-white">G</span>
      Continue with Google
    </button>
    <button type="button" class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
      <span aria-hidden="true" class="grid h-5 w-5 place-items-center rounded-full bg-gray-900 text-[0.65rem] font-bold text-white dark:bg-gray-100 dark:text-gray-900">GH</span>
      Continue with GitHub
    </button>
  </div>

  <div class="my-5 flex items-center gap-3">
    <span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
    <span class="text-xs font-medium text-gray-500 dark:text-gray-400">or</span>
    <span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
  </div>

  <form class="space-y-4" action="#" method="post">
    <div>
      <label for="social-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
      <input id="social-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="social-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
      <input id="social-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>