BlocksAuth Form
Hello Yumma UI! 🎉

Auth Form

Authentication forms for login and registration.

Basic Sign in

Welcome back

Enter your credentials to sign in to your account.

Forgot password?

Don't have an account? Sign up

<div class="p-8 b-1 bc-silver-4 rad-0">
  <div class="max-w-sm">
    <h2 class="ff-s fs-xxl fw-600 tc-slate-9 mb-2">Welcome back</h2>
    <p class="fs-sm tc-slate-6 mb-6">Enter your credentials to sign in to your account.</p>
    <form class="d-f fd-c g-4">
      <div class="d-f fd-c g-1">
        <label class="fs-sm fw-600 tc-slate-9">Email</label>
        <input type="email" placeholder="you@example.com" class="w-full px-3 py-2 b-1 bc-silver-4 rad-0 fs-sm tc-black f:oc-silver-1 f:os-s f:ow-2" />
      </div>
      <div class="d-f fd-c g-1">
        <label class="fs-sm fw-600 tc-slate-9">Password</label>
        <input type="password" placeholder="••••••••" class="w-full px-3 py-2 b-1 bc-silver-4 rad-0 fs-sm tc-black f:oc-silver-1 f:os-s f:ow-2" />
      </div>
      <div class="d-f jc-sb ai-c">
        <div class="d-f ai-c g-2">
          <input type="checkbox" id="remember" class="d-4 ac-slate" />
          <label for="remember" class="fs-sm tc-slate-6">Keep me logged in</label>
        </div>
        <a href="#" class="fs-sm tc-slate-6 h:tc-slate">Forgot password?</a>
      </div>
      <button type="submit" class="w-full px-4 py-2 rad-0 fs-sm fw-600 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Sign in</button>
    </form>
    <p class="fs-sm tc-slate-6 ta-c mt-6">Don't have an account? <a href="#" class="tc-slate fw-600">Sign up</a></p>
  </div>
</div>

Basic Sign up

Create an account

Enter your credentials to sign up to your account.

Already have an account? Sign in

<div class="p-8 b-1 bc-silver-4 rad-0">
  <div class="max-w-sm">
    <h2 class="ff-s fs-xxl fw-600 tc-slate-9 mb-2">Create an account</h2>
    <p class="fs-sm tc-slate-6 mb-6">Enter your credentials to sign up to your account.</p>
    <form class="d-f fd-c g-4">
      <div class="d-f fd-c g-1">
        <label class="fs-sm fw-600 tc-slate-9">Name</label>
        <input type="text" placeholder="Your name" class="w-full px-3 py-2 b-1 bc-silver-4 rad-0 fs-sm tc-black f:oc-silver-1 f:os-s f:ow-2" />
      </div>
      <div class="d-f fd-c g-1">
        <label class="fs-sm fw-600 tc-slate-9">Email</label>
        <input type="email" placeholder="you@example.com" class="w-full px-3 py-2 b-1 bc-silver-4 rad-0 fs-sm tc-black f:oc-silver-1 f:os-s f:ow-2" />
      </div>
      <div class="d-f fd-c g-1">
        <label class="fs-sm fw-600 tc-slate-9">Password</label>
        <input type="password" placeholder="••••••••" class="w-full px-3 py-2 b-1 bc-silver-4 rad-0 fs-sm tc-black f:oc-silver-1 f:os-s f:ow-2" />
      </div>
      <button type="submit" class="w-full px-4 py-2 rad-0 fs-sm fw-600 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Create account</button>
    </form>
    <p class="fs-sm tc-slate-6 ta-c mt-6">Already have an account? <a href="#" class="tc-slate fw-600">Sign in</a></p>
  </div>
</div>