Tailwind CSS Authentication Form Snippets Blocks

All Blocks
Application UI
Authentication
Authentication Form Snippets

Authentication Form Snippets

Embedded sign-in, sign-up, and account recovery forms for quick authentication UI integration.

Embedded sign-in card combines a social login button, email and password fields, a remember-me checkbox, and recovery link.

<div class="bg-card border border-card-line rounded-xl shadow-2xs">
  
  <div class="p-4 sm:p-7">
    <div class="text-center">
      <h3 id="hs-modal-signin-label" class="block text-2xl font-bold text-foreground">Sign in</h3>
      <p class="mt-2 text-sm text-muted-foreground-2">
        Don't have an account yet?
        <a class="text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
          Sign up here
        </a>
      </p>
    </div>

<div class="mt-5">
      <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
        <svg class="w-4 h-auto" width="46" height="47" viewBox="0 0 46 47" fill="none">
          <path d="M46 24.0287C46 22.09 45.8533 20.68 45.5013 19.2112H23.4694V27.9356H36.4069C36.1429 30.1094 34.7347 33.37 31.5957 35.5731L31.5663 35.8669L38.5191 41.2719L38.9885 41.3306C43.4477 37.2181 46 31.1669 46 24.0287Z" fill="#4285F4"/>
          <path d="M23.4694 47C29.8061 47 35.1161 44.9144 39.0179 41.3012L31.625 35.5437C29.6301 36.9244 26.9898 37.8937 23.4987 37.8937C17.2793 37.8937 12.0281 33.7812 10.1505 28.1412L9.88649 28.1706L2.61097 33.7812L2.52296 34.0456C6.36608 41.7125 14.287 47 23.4694 47Z" fill="#34A853"/>
          <path d="M10.1212 28.1413C9.62245 26.6725 9.32908 25.1156 9.32908 23.5C9.32908 21.8844 9.62245 20.3275 10.0918 18.8588V18.5356L2.75765 12.8369L2.52296 12.9544C0.909439 16.1269 0 19.7106 0 23.5C0 27.2894 0.909439 30.8731 2.49362 34.0456L10.1212 28.1413Z" fill="#FBBC05"/>
          <path d="M23.4694 9.07688C27.8699 9.07688 30.8622 10.9863 32.5344 12.5725L39.1645 6.11C35.0867 2.32063 29.8061 0 23.4694 0C14.287 0 6.36607 5.2875 2.49362 12.9544L10.0918 18.8588C11.9987 13.1894 17.25 9.07688 23.4694 9.07688Z" fill="#EB4335"/>
        </svg>
        Sign in with Google
      </a>

<form>
        <div class="grid gap-y-4">
          
          <div>
            <label for="email" class="block text-sm mb-2 text-foreground">Email address</label>
            <div class="relative">
              <input type="email" id="email" name="email" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" required aria-describedby="email-error">
              <div class="hidden absolute inset-y-0 inset-e-0 pointer-events-none pe-3">
                <svg class="size-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                </svg>
              </div>
            </div>
            <p class="hidden text-xs text-red-600 mt-2" id="email-error">Please include a valid email address so we can get back to you</p>
          </div>

<div>
            <div class="flex flex-wrap items-center gap-2">
              <label for="password" class="block text-sm mb-2 text-foreground">Password</label>
            </div>
            <div class="relative">
              <input type="password" id="password" name="password" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" required aria-describedby="password-error">
              <div class="hidden absolute inset-y-0 inset-e-0 pointer-events-none pe-3">
                <svg class="size-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                </svg>
              </div>
            </div>
            <p class="hidden text-xs text-red-600 mt-2" id="password-error">8+ characters required</p>
          </div>

<div class="flex items-center">
            <div class="flex">
              <input id="checkbox" name="checkbox" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </div>
            <div class="ms-3">
              <label for="checkbox" class="text-sm text-foreground">
                Remember me
              </label>
            </div>
          </div>

</div>

Embedded sign-up card combines a social signup button, account fields, password confirmation, and terms consent checkbox.

<div class="bg-card border border-card-line rounded-xl shadow-2xs">
  
  <div class="p-4 sm:p-7">
    <div class="text-center">
      <h3 id="hs-modal-signin-label" class="block text-2xl font-bold text-foreground">Sign up</h3>
      <p class="mt-2 text-sm text-muted-foreground-2">
        Already have an account?
        <a class="text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
          Sign in here
        </a>
      </p>
    </div>

<div>
            <label for="confirm-password" class="block text-sm mb-2 text-foreground">Confirm Password</label>
            <div class="relative">
              <input type="password" id="confirm-password" name="confirm-password" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" required aria-describedby="confirm-password-error">
              <div class="hidden absolute inset-y-0 inset-e-0 pointer-events-none pe-3">
                <svg class="size-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                </svg>
              </div>
            </div>
            <p class="hidden text-xs text-red-600 mt-2" id="confirm-password-error">Password does not match the password</p>
          </div>

<div class="flex items-center">
            <div class="flex">
              <input id="checkbox" name="checkbox" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
            </div>
            <div class="ms-3">
              <label for="checkbox" class="text-sm text-foreground">
                I accept the <a class="text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">Terms and Conditions</a>
              </label>
            </div>
          </div>

</div>

Embedded Account Recovery Form Free

Embedded recovery card centers an email field, reset action, and return sign-in prompt inside a compact auth shell.

<div class="bg-card border border-card-line rounded-xl shadow-2xs">
    
    <div class="p-4 sm:p-7">
      <div class="text-center">
        <h3 id="hs-modal-signin-label" class="block text-2xl font-bold text-foreground">Forgot password?</h3>
        <p class="mt-2 text-sm text-muted-foreground-2">
          Remember your password?
          <a class="text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
            Sign in here
          </a>
        </p>
      </div>

<form>
          <div class="grid gap-y-4">
            
            <div>
              <label for="email" class="block text-sm mb-2 text-foreground">Email address</label>
              <div class="relative">
                <input type="email" id="email" name="email" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" required aria-describedby="email-error">
                <div class="hidden absolute inset-y-0 inset-e-0 pointer-events-none pe-3">
                  <svg class="size-5 text-red-500" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                  </svg>
                </div>
              </div>
              <p class="hidden text-xs text-red-600 mt-2" id="email-error">Please include a valid email address so we can get back to you</p>
            </div>

<div class="flex items-center">
              <div class="flex">
                <input id="checkbox" name="checkbox" type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
              </div>
              <div class="ms-3">
                <label for="checkbox" class="text-sm text-foreground">
                  Remember me
                </label>
              </div>
            </div>

<button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none">Reset password</button>
          </div>
        </form>
        
    </div>

</div>

Authentication Form Snippets

Embedded Sign-In Form Free

Embedded Sign-Up Form Free

Embedded Account Recovery Form Free