Sign In

<div class="flex items-center justify-center p-6">
  <div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
    <div class="mb-6 flex flex-col items-center text-center">
      <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100">
        <svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
        </svg>
      </div>
      <h2 class="text-xl font-semibold text-gray-900">Welcome back</h2>
      <p class="mt-1 text-sm text-gray-500">Sign in to your account to continue</p>
    </div>
    <form class="space-y-4">
      <div>
        <label for="email" class="mb-1 block text-sm font-medium text-gray-700">Email</label>
        <input id="email" type="email" placeholder="you@example.com"
          class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20" />
      </div>
      <div>
        <label for="password" class="mb-1 block text-sm font-medium text-gray-700">Password</label>
        <input id="password" type="password" placeholder="Enter your password"
          class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20" />
      </div>
      <div class="flex items-center justify-between">
        <label class="flex items-center gap-2 text-sm text-gray-600">
          <input type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600" />
          Remember me for 30 days
        </label>
        <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Forgot password?</a>
      </div>
      <button type="submit"
        class="w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
        Sign in
      </button>
    </form>
    <div class="my-6 flex items-center gap-3">
      <div class="h-px flex-1 bg-gray-200"></div>
      <span class="text-xs text-gray-400">or continue with</span>
      <div class="h-px flex-1 bg-gray-200"></div>
    </div>
    <div class="grid grid-cols-2 gap-3">
      <button type="button"
        class="flex 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 hover:bg-gray-50">
        <span class="text-lg font-bold text-blue-600">G</span> Google
      </button>
      <button type="button"
        class="flex 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 hover:bg-gray-50">
        <span class="text-lg font-bold">Apple</span>
      </button>
    </div>
    <p class="mt-6 text-center text-sm text-gray-500">
      Don't have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Sign up</a>
    </p>
  </div>
</div>

<div class="w-full max-w-md mx-auto rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
  <div class="text-center mb-6">
    <h2 class="text-lg font-semibold text-gray-900">Sign in to Acme</h2>
    <p class="text-sm text-gray-500">Choose how you'd like to continue</p>
  </div>
  <div class="space-y-3">
    <button class="w-full flex items-center justify-center gap-3 rounded-lg border border-gray-300 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">
      <span class="w-5 text-center text-base text-[#4285F4] font-bold">G</span> Continue with Google
    </button>
    <button class="w-full flex items-center justify-center gap-3 rounded-lg border border-gray-300 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">
      <span class="w-5 text-center text-base text-gray-900"></span> Continue with GitHub
    </button>
    <button class="w-full flex items-center justify-center gap-3 rounded-lg border border-gray-300 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">
      <span class="w-5 text-center text-base text-gray-900"></span> Continue with Apple
    </button>
    <button class="w-full flex items-center justify-center gap-3 rounded-lg border border-gray-300 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">
      <span class="w-5 text-center text-base text-[#00A4EF] font-bold">⊞</span> Continue with Microsoft
    </button>
  </div>
  <div class="my-5 flex items-center gap-3">
    <div class="h-px flex-1 bg-gray-200"></div>
    <span class="text-xs text-gray-400">or</span>
    <div class="h-px flex-1 bg-gray-200"></div>
  </div>
  <button class="w-full rounded-lg bg-gray-900 py-2.5 text-sm font-semibold text-white hover:bg-gray-800">
    Continue with email
  </button>
  <p class="mt-5 text-center text-xs text-gray-400">
    By continuing, you agree to our <a href="#" class="underline hover:text-gray-600">Terms of Service</a>.
  </p>
</div>

<div class="w-full max-w-md mx-auto rounded-xl border border-gray-200 bg-white p-6 shadow-sm text-center">
  <h2 class="text-lg font-semibold text-gray-900">Enter verification code</h2>
  <p class="mt-1 text-sm text-gray-500">
    We sent a 6-digit code to <span class="font-medium text-gray-900">+1 (555) •••-0142</span>
  </p>
  <div class="mt-6 flex justify-center gap-2.5">
    <input type="text" maxlength="1" value="4" aria-label="Digit 1" class="h-12 w-11 rounded-lg border border-gray-300 text-center text-lg font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
    <input type="text" maxlength="1" value="7" aria-label="Digit 2" class="h-12 w-11 rounded-lg border border-gray-300 text-center text-lg font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
    <input type="text" maxlength="1" value="2" aria-label="Digit 3" class="h-12 w-11 rounded-lg border border-gray-300 text-center text-lg font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
    <input type="text" maxlength="1" aria-label="Digit 4" class="h-12 w-11 rounded-lg border border-indigo-500 ring-2 ring-indigo-100 text-center text-lg font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
    <input type="text" maxlength="1" aria-label="Digit 5" class="h-12 w-11 rounded-lg border border-gray-300 text-center text-lg font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
    <input type="text" maxlength="1" aria-label="Digit 6" class="h-12 w-11 rounded-lg border border-gray-300 text-center text-lg font-semibold text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
  </div>
  <button class="mt-6 w-full rounded-lg bg-indigo-600 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700">
    Verify code
  </button>
  <p class="mt-4 text-sm text-gray-500">
    Didn't receive a code? <button class="font-medium text-indigo-600 hover:text-indigo-500">Resend</button>
    <span class="text-gray-400"> (0:42)</span>
  </p>
</div>

<div class="w-full max-w-md mx-auto rounded-xl border border-gray-200 bg-white p-6 shadow-sm text-center">
  <div class="w-14 h-14 rounded-full bg-violet-100 flex items-center justify-center mx-auto mb-4">
    <svg class="w-7 h-7 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
    </svg>
  </div>
  <h2 class="text-lg font-semibold text-gray-900">Check your inbox</h2>
  <p class="mt-1 text-sm text-gray-500">
    We sent a magic sign-in link to <span class="font-medium text-gray-900">jane@company.com</span>.
    Click the link to sign in instantly — no password needed.
  </p>
  <div class="mt-5 rounded-lg bg-violet-50 border border-violet-100 px-4 py-3 text-left">
    <p class="text-xs font-medium text-violet-700">The link expires in 15 minutes</p>
    <p class="text-xs text-violet-500 mt-0.5">Didn't get it? Check your spam folder first.</p>
  </div>
  <button class="mt-5 w-full rounded-lg border border-gray-300 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">
    Resend link
  </button>
  <p class="mt-4 text-sm text-gray-500">
    Wrong email? <a href="#" class="font-medium text-violet-600 hover:text-violet-500">Change it</a>
  </p>
</div>