Sign Up

<div class="w-full max-w-md mx-auto rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
  <div class="mb-6">
    <h2 class="text-lg font-semibold text-gray-900">Create your account</h2>
    <p class="text-sm text-gray-500">Start your 14-day free trial. No credit card required.</p>
  </div>
  <form class="space-y-4" action="#" method="POST">
    <div class="grid grid-cols-2 gap-3">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1.5">First name</label>
        <input type="text" placeholder="Jane" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1.5">Last name</label>
        <input type="text" placeholder="Doe" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
      </div>
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1.5">Work email</label>
      <input type="email" placeholder="jane@company.com" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
      <input type="password" placeholder="Create a strong password" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
      <ul class="mt-2 space-y-1">
        <li class="flex items-center gap-2 text-xs">
          <span class="flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">✓</span>
          <span class="text-gray-600">At least 8 characters</span>
        </li>
        <li class="flex items-center gap-2 text-xs">
          <span class="flex h-4 w-4 items-center justify-center rounded-full bg-emerald-100 text-emerald-600">✓</span>
          <span class="text-gray-600">One uppercase letter</span>
        </li>
        <li class="flex items-center gap-2 text-xs">
          <span class="flex h-4 w-4 items-center justify-center rounded-full bg-gray-100 text-gray-400">·</span>
          <span class="text-gray-400">One number or symbol</span>
        </li>
      </ul>
    </div>
    <button type="submit" class="w-full rounded-lg bg-indigo-600 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700">
      Create account
    </button>
    <p class="text-xs text-gray-400 text-center">
      By signing up you agree to our <a href="#" class="underline hover:text-gray-600">Terms</a> and <a href="#" class="underline hover:text-gray-600">Privacy Policy</a>.
    </p>
  </form>
  <p class="mt-5 text-center text-sm text-gray-500">
    Already have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Sign in</a>
  </p>
</div>