Login Form

<div className="w-full max-w-sm rounded-2xl border
  bg-white p-8 shadow-lg">

  {/* Header */}
  <h2 className="text-xl font-bold text-center">
    Welcome back
  </h2>

  {/* Form */}
  <form className="flex flex-col gap-4">
    <div className="flex flex-col gap-1.5">
      <label className="text-sm font-medium">Email</label>
      <input className="rounded-lg border px-4 py-2.5
        text-sm focus:border-indigo-400
        focus:ring-2 focus:ring-indigo-200
        focus:outline-none" />
    </div>

    <button className="w-full rounded-lg bg-indigo-500
      py-2.5 text-white font-bold
      hover:bg-indigo-600 shadow-md">
      Sign In
    </button>
  </form>

  {/* Divider */}
  <div className="flex items-center gap-3 my-5">
    <div className="h-px flex-1 bg-neutral-200" />
    <span className="text-xs text-neutral-400">
      or continue with
    </span>
    <div className="h-px flex-1 bg-neutral-200" />
  </div>

  {/* Social Buttons */}
  <div className="grid grid-cols-2 gap-3">
    <button className="rounded-lg border px-4 py-2
      text-sm font-medium hover:bg-neutral-50">
      Google
    </button>
    <button className="...">GitHub</button>
  </div>
</div>