<div class="hero min-h-screen bg-base-200">
  <div class="hero-content flex-col lg:flex-row-reverse">
    <div class="text-center lg:text-left p-5">
      <h1 class="text-5xl font-bold">Create Account now!</h1>
      <p class="py-6">
        Welcome to Qtools! Create account to access various convenient and
        time-saving tools at your fingertips.
      </p>
    </div>
    <div class="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
      <div class="card-body">
        <div class="form-control">
          <label class="label">
            <span class="label-text">Email</span>
          </label>
          <input
            id="register_email"
            type="email"
            placeholder="email"
            class="input input-bordered"
            autofocus
          />
        </div>
        <div class="form-control">
          <label class="label">
            <span class="label-text">Password</span>
          </label>
          <input
            id="register_pass"
            type="password"
            placeholder="password"
            class="input input-bordered"
          />
        </div>
        <div class="form-control">
          <label class="label">
            <span class="label-text">Confirm Password</span>
          </label>
          <input
            id="register_pass_2"
            type="password"
            placeholder="confirm password"
            class="input input-bordered"
          />
        </div>
        <div class="form-control mt-6">
          <button id="register-button" class="btn btn-primary" onclick="callRegister()">Create Account</button>
          <div class="divider text-sm">OR</div>
          <a class="btn btn-outline" href="/login">Login</a>
        </div>
      </div>
    </div>
  </div>
</div>
