Tailwind CSS Authentication Modals Blocks

All Blocks
Application UI
Authentication
Authentication Modals

Authentication Modals

Dialog-based sign-in, sign-up, two-factor verification, and account recovery modals for account access without leaving the current screen.

Step-based security modal guides app download, QR scanning, and six-digit code entry inside a single overlay.

<div id="hs-pro-shn2fam" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shn2fam-label">
  <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-md sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
    <div class="w-full max-h-full relative overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
      
      <div class="py-3 px-6 md:px-8 flex justify-between items-center border-b border-overlay-divider">
        <h2 id="hs-pro-shn2fam-label" class="font-medium text-foreground">
          Enable Two-Factor Authentication
        </h2>
        <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-shn2fam">
          <span class="sr-only">Close</span>
          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
      </div>

<div class="p-6 md:p-8 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
        <ul>
          
          <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:inset-s-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-foreground before:rounded-full before:bg-surface last:after:hidden after:absolute after:top-9 after:bottom-2 after:inset-s-3.5 after:-translate-x-[0.5px] after:border-s after:border-line-2" style="counter-increment: step 1;">
            <span class="block font-semibold text-sm text-foreground">
              Download app
            </span>
            <p class="text-[13px] text-muted-foreground-1">
              Download a mobile authentication app.
            </p>
          </li>

<li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:inset-s-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-foreground before:rounded-full before:bg-surface last:after:hidden after:absolute after:top-9 after:bottom-2 after:inset-s-3.5 after:-translate-x-[0.5px] after:border-s after:border-line-2" style="counter-increment: step 1;">
            <span class="block font-semibold text-sm text-foreground">
              Scan QR Code
            </span>
            <p class="text-[13px] text-muted-foreground-1">
              Scan this QR code using a mobile authentication app. This will generate a verification code.
            </p>
            
            <div class="mt-3">
              <span class="p-1 inline-block border border-line-3 rounded-lg">
                <img class="shrink-0 size-32" src="../../../assets/svg/others/qr-code.svg" alt="QR Code">
              </span>
            </div>
          </li>

Open related personal info template

Authentication modal combines a social login button, email and password fields, a remember-me checkbox, and recovery link.

<div class="text-center">
                    <button type="button" class="py-3 px-4 inline-flex 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" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-modal-signin" data-hs-overlay="#hs-modal-signin">
                      Open modal
                    </button>
                  </div>

<div id="hs-modal-signin" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto" role="dialog" tabindex="-1" aria-labelledby="hs-modal-signin-label">
                    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                      <div class="relative w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                        
                        <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>
                    </div>
                  </div>

Open related login template

Registration modal combines a social signup button, account fields, password confirmation, and terms consent checkbox.

<div class="text-center">
                    <button type="button" class="py-3 px-4 inline-flex 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" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-modal-signup" data-hs-overlay="#hs-modal-signup">
                      Open modal
                    </button>
                  </div>

<div id="hs-modal-signup" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto" role="dialog" tabindex="-1" aria-labelledby="hs-modal-signin-label">
                    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                      <div class="relative w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                        
                        <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>
                    </div>
                  </div>

Open related create account template

Recovery modal centers an email field, reset action, and return sign-in prompt inside a compact auth overlay.

<div class="text-center">
                    <button type="button" class="py-3 px-4 inline-flex 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" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-modal-recover-account" data-hs-overlay="#hs-modal-recover-account">
                      Open modal
                    </button>
                  </div>

<div id="hs-modal-recover-account" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto" role="dialog" tabindex="-1" aria-labelledby="hs-modal-signin-label">
                    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                      <div class="relative w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                        
                        <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>

<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>
                    </div>
                  </div>

Open related forgot password template

Authentication Modals

Step-Based Two-Factor Authentication Modal Pro

Sign-In Modal with Social Login Free

Sign-Up Modal with Social Signup Free

Account Recovery Modal with Email Reset Free