Tailwind CSS Authentication Pages Blocks

All Blocks
Application UI
Authentication
Authentication Pages

Authentication Pages

Centered sign-in page stacks social login buttons, email and password fields, and a secondary account-creation prompt.

<header class="flex flex-wrap md:justify-start md:flex-nowrap z-50 bg-navbar border-b border-navbar-line">
                      <div class="max-w-340 flex justify-center basis-full items-center w-full mx-auto py-3 px-4 sm:px-6 lg:px-8">
                        
                        <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="../../../templates/ecommerce/storefront/index.html" aria-label="Preline">
                          <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
                            <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                            <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                            <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
                          </svg>
                        </a>
                        
                      </div>
                    </header>

<main id="content" class="pb-23 sm:pb-16">
                      <div class="py-10 lg:py-20 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                        <div class="w-full max-w-sm mx-auto">
                          
                          <div class="space-y-8">
                            <div class="text-center">
                              <h2 class="font-medium text-xl text-foreground">
                                Log In
                              </h2>
                            </div>

<div class="space-y-3">
                              
                              <div>
                                <label for="hs-pro-shlgfem" class="sr-only">
                                  Email
                                </label>

<div>
                                <label for="hs-pro-shlgfps" class="sr-only">
                                  Password
                                </label>

<div class="flex flex-wrap justify-between items-center gap-3">
                                
                                <div class="flex items-center gap-x-2">
                                  <input 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" id="hs-pro-shlgfemch">
                                  <label for="hs-pro-shlgfemch" class="text-[13px] text-muted-foreground-1">
                                    Remember me
                                  </label>
                                </div>

<a class="text-[13px] text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/forgot-password.html">
                                  Forgot your password?
                                </a>
                              </div>
                            </div>

<a class="py-3 px-4 relative w-full inline-flex justify-center items-center gap-x-1.5 sm: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="../../../templates/ecommerce/storefront/create-account.html">
                                Create account
                              </a>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </main>

<footer class="mt-auto h-23 sm:h-16 absolute bottom-0 inset-x-0 bg-footer border-t border-footer-line">
                      <div class="w-full max-w-5xl py-6 mx-auto px-4 sm:px-6 lg:px-8">
                        
                        <ul class="flex flex-wrap justify-center items-center whitespace-nowrap gap-3">
                          <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                            © 2026 Preline Labs.
                          </li>
                          <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                            <a class="text-xs text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">
                              Terms
                            </a>
                          </li>
                          <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                            <a class="text-xs text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">
                              Privacy
                            </a>
                          </li>
                          <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                            <a class="text-xs text-muted-foreground-1 underline-offset-4 hover:underline hover:text-foreground focus:outline-hidden focus:underline focus:text-foreground" href="#">
                              Your Privacy Choices
                            </a>
                          </li>
                          <li class="inline-flex items-center relative text-xs text-muted-foreground-1 pe-3.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                            
                            <button type="button" class="hs-dark-mode-active:hidden flex hs-dark-mode items-center gap-x-1.5 text-sm text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-theme-click-value="dark">
                              <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="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg>
                              <span class="sr-only">Dark mode</span>
                            </button>
                            <button type="button" class="hs-dark-mode-active:flex hidden hs-dark-mode items-center gap-x-1.5 text-sm text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-theme-click-value="light">
                              <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"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
                              <span class="sr-only">Light mode</span>
                            </button>
                            
                          </li>
                        </ul>
                        
                      </div>
                    </footer>

Open related login template

Centered Create Account Page Pro

Centered account-creation page combines social signup actions, multi-field registration inputs, and terms consent.

<main id="content" class="pb-23 sm:pb-16">
                      <div class="py-10 lg:py-20 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                        <div class="w-full max-w-sm mx-auto">
                          
                          <div class="space-y-8">
                            <div class="text-center">
                              <h1 class="font-medium text-xl text-foreground">
                                Create an account
                              </h1>
                            </div>

<div class="space-y-5">
                              <div class="space-y-3">
                                
                                <div>
                                  <label for="hs-pro-shcafem" class="sr-only">
                                    Email
                                  </label>

<div>
                                  <label for="hs-pro-shcafpw" class="sr-only">
                                    Password
                                  </label>

<div id="hs-pro-shcafpw-hints" class="mt-2">
                                    <ul class="space-y-2 text-xs text-muted-foreground-1">
                                      <li data-hs-strong-password-hints-rule-text="min-length" class="hs-strong-password-active:text-teal-500 flex items-center gap-x-3">
                                        <span class="hidden" data-check>
                                          <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"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
                                        </span>
                                        <span data-uncheck class="size-4 border border-line-2 rounded-full"></span>
                                        <span class="text-muted-foreground-1">Minimum 8 characters</span>
                                      </li>
                                      <li data-hs-strong-password-hints-rule-text="lowercase" class="hs-strong-password-active:text-teal-500 flex items-center gap-x-3">
                                        <span class="hidden" data-check>
                                          <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"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
                                        </span>
                                        <span data-uncheck class="size-4 border border-line-2 rounded-full"></span>
                                        <span class="text-muted-foreground-1">Contain lowercase</span>
                                      </li>
                                      <li data-hs-strong-password-hints-rule-text="uppercase" class="hs-strong-password-active:text-teal-500 flex items-center gap-x-3">
                                        <span class="hidden" data-check>
                                          <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"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
                                        </span>
                                        <span data-uncheck class="size-4 border border-line-2 rounded-full"></span>
                                        <span class="text-muted-foreground-1">Contain uppercase</span>
                                      </li>
                                      <li data-hs-strong-password-hints-rule-text="numbers" class="hs-strong-password-active:text-teal-500 flex items-center gap-x-3">
                                        <span class="hidden" data-check>
                                          <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"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
                                        </span>
                                        <span data-uncheck class="size-4 border border-line-2 rounded-full"></span>
                                        <span class="text-muted-foreground-1">Contain numbers</span>
                                      </li>
                                      <li data-hs-strong-password-hints-rule-text="special-characters" class="hs-strong-password-active:text-teal-500 flex items-center gap-x-3">
                                        <span class="hidden" data-check>
                                          <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"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
                                        </span>
                                        <span data-uncheck class="size-4 border border-line-2 rounded-full"></span>
                                        <span class="text-muted-foreground-1">Contain special characters: !"#$%&'()*+,-./:;< = >?@[]^_`{}|~</span>
                                      </li>
                                    </ul>
                                  </div>
                                </div>
                                
                              </div>

<div class="space-y-5">
                                <div class="pt-5 mt-6 border-t border-line-2">
                                  <div class="space-y-3">
                                    <p class="block mb-4 font-medium text-sm text-foreground">
                                      Date of birth
                                    </p>

<div>
                                      <label for="hs-pro-shcafbr" class="sr-only">
                                        Date of birth
                                      </label>

<p class="mt-2 text-xs text-muted-foreground-1">
                                    Enter your birthday in the format MM/DD/YYYY. Please note that once registered, your birthday cannot be edited.
                                  </p>
                                </div>

<div class="pt-5 mt-6 border-t border-line-2">
                                  <div class="space-y-3">
                                    <p class="block mb-4 font-medium text-sm text-foreground">
                                      Gender
                                    </p>

<div class="flex items-center gap-x-1">
                                      <input type="radio" name="hs-pro-shgnfbr" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full 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" id="hs-pro-shgnfbr1">
                                      <label for="hs-pro-shgnfbr1" class="ms-1.5 text-sm text-foreground">
                                        Female
                                      </label>
                                    </div>

<div class="flex items-center gap-x-1">
                                      <input type="radio" name="hs-pro-shgnfbr" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full 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" id="hs-pro-shgnfbr2">
                                      <label for="hs-pro-shgnfbr2" class="ms-1.5 text-sm text-foreground">
                                        Male
                                      </label>
                                    </div>
                                    
                                  </div>

<p class="mt-2 text-xs text-muted-foreground-1">
                                    You can receive item recommendations tailored to your registered information, such as your gender.
                                  </p>
                                </div>

<div class="pt-5 mt-6 border-t border-line-2">
                                  <p class="block mb-4 font-medium text-sm text-foreground">
                                    Subscribe to mailing list to receive $10 off your next online purchase
                                  </p>

<div class="pt-5 mt-6 border-t border-line-2">
                                  <p class="block mb-4 font-medium text-sm text-foreground">
                                    Membership agreement
                                  </p>

<div class="flex items-center gap-x-1">
                                    <input 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" id="hs-pro-shcaftac">
                                    <label for="hs-pro-shcaftac" class="ms-1.5 text-sm text-muted-foreground-1">
                                      I accept the
                                      <a class="text-sm text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">
                                        Terms and Conditions
                                      </a>
                                    </label>
                                  </div>
                                  
                                </div>
                              </div>
                            </div>

<div class="space-y-4">
                              <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 sm:text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                Create account
                              </button>
          
                              <p class="text-center text-sm text-muted-foreground-1">
                                Already have an account?
                                <a class="text-[13px] text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/login.html">
                                  Log in
                                </a>
                              </p>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </main>

Open related create account template

Lock Screen Pro

Compact lock screen centers a password card with return sign-in actions over a full-page gradient backdrop.

<!DOCTYPE html>
<html lang="en" class="relative min-h-full h-full">
  <body class="flex h-full items-center py-16 bg-surface before:absolute before:top-0 before:inset-s-0 before:bg-[url('https://preline.co/assets/svg/component/hero-gradient.svg')] dark:before:bg-[url('https://preline.co/assets/svg/component-dark/hero-gradient.svg')] before:bg-no-repeat before:bg-center before:bg-cover before:size-full before:-z-1">
    <main class="w-full max-w-sm mx-auto p-6">
      
      <div>
        
        <div class="text-center mb-3">
          
          <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
            <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
              <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
              <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
              <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
            </svg>
          </a>
          
        </div>

<div class="p-5 flex flex-col bg-card shadow-xs rounded-2xl">
          <div class="text-center mb-8">
            <h1 class="text-xl font-semibold text-foreground">
              Welcome back, James
            </h1>
            <p class="mt-1 text-sm text-muted-foreground-1">
              Enter your password to sign in.
            </p>
          </div>

<form>
            <div class="space-y-5">
              <div class="space-y-3">
                
                <div>
                  <label for="hs-pro-dalp" class="block mb-2 text-sm font-medium text-foreground">
                    Password
                  </label>

<div class="relative">
                    <input id="hs-pro-dalp" type="password" class="py-2 sm:py-2.5 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="********">
                    <button type="button" data-hs-toggle-password='{
                        "target": "#hs-pro-dalp"
                      }' class="absolute inset-y-0 inset-e-0 flex items-center z-20 px-3 cursor-pointer text-muted-foreground rounded-e-md hover:text-primary-hover focus:outline-hidden focus:text-primary-focus">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path class="hs-password-active:hidden" d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
                        <path class="hs-password-active:hidden" d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                        <path class="hs-password-active:hidden" d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
                        <path class="hidden hs-password-active:block" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                        <path class="hidden hs-password-active:block" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                      </svg>
                    </button>
                  </div>
                </div>
                
                
                <button type="button" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
                  Continue
                </button>
              </div>

<button type="button" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                <svg class="size-4" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_4132_5805)">
                  <path d="M32.2566 16.36C32.2566 15.04 32.1567 14.08 31.9171 13.08H16.9166V19.02H25.7251C25.5454 20.5 24.5866 22.72 22.4494 24.22L22.4294 24.42L27.1633 28.1L27.4828 28.14C30.5189 25.34 32.2566 21.22 32.2566 16.36Z" fill="#4285F4"/>
                  <path d="M16.9166 32C21.231 32 24.8463 30.58 27.5028 28.12L22.4694 24.2C21.1111 25.14 19.3135 25.8 16.9366 25.8C12.7021 25.8 9.12677 23 7.84844 19.16L7.66867 19.18L2.71513 23L2.65521 23.18C5.2718 28.4 10.6648 32 16.9166 32Z" fill="#34A853"/>
                  <path d="M7.82845 19.16C7.48889 18.16 7.28915 17.1 7.28915 16C7.28915 14.9 7.48889 13.84 7.80848 12.84V12.62L2.81499 8.73999L2.6552 8.81999C1.55663 10.98 0.937439 13.42 0.937439 16C0.937439 18.58 1.55663 21.02 2.63522 23.18L7.82845 19.16Z" fill="#FBBC05"/>
                  <path d="M16.9166 6.18C19.9127 6.18 21.9501 7.48 23.0886 8.56L27.6027 4.16C24.8263 1.58 21.231 0 16.9166 0C10.6648 0 5.27181 3.6 2.63525 8.82L7.80851 12.84C9.10681 8.98 12.6821 6.18 16.9166 6.18Z" fill="#EB4335"/>
                  </g>
                  <defs>
                  <clipPath id="clip0_4132_5805">
                  <rect width="32" height="32" fill="white" transform="translate(0.937439)"/>
                  </clipPath>
                  </defs>
                </svg>
                Sign in with Google
              </button>
            </div>
          </form>
        </div>
        
      </div>
      
    </main>

Split login page pairs an onboarding sidebar with social actions, email and password fields, and recovery link.

<!DOCTYPE html>
<html lang="en" dir="ltr" class="relative min-h-full">
  <body class="bg-background">
    
    <main class="flex min-h-full">
      
      <div class="hidden min-h-screen lg:w-100 xl:w-107.5 bg-surface lg:flex flex-col justify-between p-6">
        
        <div class="flex flex-wrap justify-between items-center gap-2">
          <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
          	<svg class="w-[31px] h-auto" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
          		<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0835 3.23358C9.88316 3.23358 3.23548 9.8771 3.23548 18.0723V35.5832H0.583496V18.0723C0.583496 8.41337 8.41851 0.583252 18.0835 0.583252C27.7485 0.583252 35.5835 8.41337 35.5835 18.0723C35.5835 27.7312 27.7485 35.5614 18.0835 35.5614H16.7357V32.911H18.0835C26.2838 32.911 32.9315 26.2675 32.9315 18.0723C32.9315 9.8771 26.2838 3.23358 18.0835 3.23358Z" class="fill-primary" fill="currentColor"/>
          		<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0833 8.62162C12.8852 8.62162 8.62666 12.9245 8.62666 18.2879V35.5833H5.97468V18.2879C5.97468 11.5105 11.3713 5.97129 18.0833 5.97129C24.7954 5.97129 30.192 11.5105 30.192 18.2879C30.192 25.0653 24.7954 30.6045 18.0833 30.6045H16.7355V27.9542H18.0833C23.2815 27.9542 27.54 23.6513 27.54 18.2879C27.54 12.9245 23.2815 8.62162 18.0833 8.62162Z" class="fill-primary" fill="currentColor"/>
          		<path d="M24.8225 18.1012C24.8225 21.8208 21.8053 24.8361 18.0833 24.8361C14.3614 24.8361 11.3442 21.8208 11.3442 18.1012C11.3442 14.3815 14.3614 11.3662 18.0833 11.3662C21.8053 11.3662 24.8225 14.3815 24.8225 18.1012Z" class="fill-primary" fill="currentColor"/>
          	</svg>
          </a>

<div class="relative">
            <select id="hs-pro-select-language" data-hs-select='{
              "placeholder": "Select country",
              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-7 flex items-center gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:border-layer-line focus:outline-hidden focus:border-layer-line",
              "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-72 p-1 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
              "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
              "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>",
              "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" 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=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
            }' class="hidden">
              <option value="">Choose</option>
              <option value="English-us" selected data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\"><g stroke-width=\"1pt\"><path fill=\"#bd3d44\" d=\"M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z\" transform=\"scale(3.9385)\"/></g><path fill=\"#192f5d\" d=\"M0 0h98.8v70H0z\" transform=\"scale(3.9385)\"/><path fill=\"#fff\" d=\"M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z\" transform=\"scale(3.9385)\"/></g></svg>"}'>
                English (US)
              </option>
              <option value="English-uk" data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-gb\" viewBox=\"0 0 512 512\"><path fill=\"#012169\" d=\"M0 0h512v512H0z\"/><path fill=\"#FFF\" d=\"M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z\"/><path fill=\"#C8102E\" d=\"M184 324l11 34L42 512H0v-3l184-185zm124-12l54 8 150 147v45L308 312zM512 0L320 196l-4-44L466 0h46zM0 1l193 189-59-8L0 49V1z\"/><path fill=\"#FFF\" d=\"M176 0v512h160V0H176zM0 176v160h512V176H0z\"/><path fill=\"#C8102E\" d=\"M0 208v96h512v-96H0zM208 0v512h96V0h-96z\"/></svg>"}'>
                English (UK)
              </option>
              <option value="Deutsch" data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-de\" viewBox=\"0 0 512 512\"><path fill=\"#ffce00\" d=\"M0 341.3h512V512H0z\"/><path d=\"M0 0h512v170.7H0z\"/><path fill=\"#d00\" d=\"M0 170.7h512v170.6H0z\"/></svg>"}'>
                Deutsch
              </option>
              <option value="Dansk" data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-dk\" viewBox=\"0 0 512 512\"><path fill=\"#c8102e\" d=\"M0 0h512.1v512H0z\"/><path fill=\"#fff\" d=\"M144 0h73.1v512H144z\"/><path fill=\"#fff\" d=\"M0 219.4h512.1v73.2H0z\"/></svg>"}'>
                Dansk
              </option>
              <option value="Italiano" data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" id=\"flag-icon-css-it\" viewBox=\"0 0 512 512\"><g fill-rule=\"evenodd\" stroke-width=\"1pt\"><path fill=\"#fff\" d=\"M0 0h512v512H0z\"/><path fill=\"#009246\" d=\"M0 0h170.7v512H0z\"/><path fill=\"#ce2b37\" d=\"M341.3 0H512v512H341.3z\"/></g></svg>"}'>
                Italiano
              </option>
              <option value="中文-繁體" data-hs-select-option='{
                "icon": "<svg class=\"shrink-0 size-4 rounded-full\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" id=\"flag-icon-css-cn\" viewBox=\"0 0 512 512\"><defs><path id=\"a\" fill=\"#ffde00\" d=\"M1-.3L-.7.8 0-1 .6.8-1-.3z\"/></defs><path fill=\"#de2910\" d=\"M0 0h512v512H0z\"/><use width=\"30\" height=\"20\" transform=\"matrix(76.8 0 0 76.8 128 128)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-121 142.6 -47) scale(25.5827)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-98.1 198 -82) scale(25.6)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"rotate(-74 272.4 -114) scale(25.6137)\" xlink:href=\"#a\"/><use width=\"30\" height=\"20\" transform=\"matrix(16 -19.968 19.968 16 256 230.4)\" xlink:href=\"#a\"/></svg>"}'>
                中文 (繁體)
              </option>
            </select>
            
          </div>
          
        </div>

<div>
          <span class="text-2xl font-medium text-foreground">
            The simplest way to manage your workforce
          </span>

<div class="flex justify-center gap-x-8">
          <svg class="w-20" width="81" height="20" viewBox="0 0 81 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_399_369933)">
            <path d="M57.5137 7.91177C56.3526 7.91177 55.5239 8.30838 55.1172 9.05941L54.8986 9.46615V8.10754H53.0092V16.3655H54.9965V11.4526C54.9965 10.2788 55.6344 9.60539 56.7458 9.60539C57.8057 9.60539 58.4133 10.2611 58.4133 11.4036V16.3655H60.4014V11.0492C60.4014 9.08304 59.3221 7.91177 57.5137 7.91177ZM47.876 7.91177C45.5309 7.91177 44.0787 9.37502 44.0787 11.7302V12.8897C44.0787 15.1546 45.5478 16.5613 47.9132 16.5613C49.4954 16.5613 50.6042 15.9816 51.3021 14.7892L50.07 14.0804C49.5545 14.7681 48.7309 15.1942 47.914 15.1942C46.7166 15.1942 46.0018 14.455 46.0018 13.2162V12.888H51.5485V11.5184C51.5485 9.32438 50.108 7.91177 47.8777 7.91177H47.876ZM49.7401 11.553H45.9951V11.3547C45.9951 9.99525 46.6626 9.24506 47.8743 9.24506C49.0414 9.24506 49.7384 9.98428 49.7384 11.2231L49.7401 11.553ZM80.1375 6.74809V5.16839H73.2634V6.74809H75.6735V14.7824H73.2634V16.3621H80.1375V14.7824H77.7266V6.74809H80.1375ZM28.0159 4.94055C24.9459 4.94055 23.0371 6.85357 23.0371 9.93449V11.6003C23.0371 14.6803 24.9451 16.5942 28.0159 16.5942C31.0867 16.5942 32.9946 14.6803 32.9946 11.6003V9.93449C32.9938 6.8502 31.0833 4.94055 28.0159 4.94055ZM30.9407 11.7142C30.9407 13.7597 29.8749 14.9327 28.0159 14.9327C26.1569 14.9327 25.0919 13.7597 25.0919 11.7142V9.81973C25.0919 7.77422 26.1585 6.60126 28.0167 6.60126C29.8749 6.60126 30.9415 7.77422 30.9415 9.81973L30.9407 11.7142ZM39.2366 7.91177C38.1936 7.91177 37.2907 8.34382 36.8198 9.06701L36.6063 9.39611V8.10754H34.7161V19.2068H36.7042V15.1867L36.9169 15.5023C37.3641 16.1655 38.2375 16.5613 39.2535 16.5613C40.9674 16.5613 42.6964 15.4415 42.6964 12.9386V11.5344C42.6964 9.73112 41.6306 7.91177 39.2366 7.91177ZM40.7083 12.8416C40.7083 14.1723 39.932 14.9993 38.6831 14.9993C37.5185 14.9993 36.7059 14.1251 36.7059 12.8745V11.6323C36.7059 10.3665 37.5253 9.47543 38.6999 9.47543C39.9396 9.47543 40.71 10.3016 40.71 11.6323L40.7083 12.8416ZM65.8949 5.16924L61.884 16.3655H63.9034L64.6713 13.9656H69.2821L69.2897 13.9892L70.0492 16.3655H72.0677L68.0501 5.16839L65.8949 5.16924ZM65.1641 12.3867L66.9733 6.72615L68.764 12.3867H65.1641ZM19.1503 8.29488C19.3679 7.6417 19.4434 6.94957 19.3718 6.26484C19.3002 5.5801 19.0832 4.91857 18.7351 4.32454C18.2185 3.42674 17.4304 2.716 16.4842 2.29459C15.5379 1.87319 14.4824 1.76285 13.4695 1.97946C13.0126 1.46423 12.451 1.05255 11.8221 0.771961C11.1933 0.491375 10.5118 0.348365 9.82318 0.352504C8.78718 0.350146 7.7772 0.67693 6.93894 1.28572C6.10068 1.89451 5.47746 2.75384 5.15919 3.73974C4.48472 3.8781 3.84756 4.15887 3.29034 4.56329C2.73311 4.96771 2.26867 5.48645 1.92806 6.08482C1.40872 6.98114 1.18717 8.01913 1.29529 9.04938C1.40341 10.0796 1.83563 11.049 2.52973 11.818C2.31298 12.4706 2.2379 13.1619 2.30949 13.8458C2.38109 14.5297 2.59771 15.1905 2.94491 15.7841C3.46103 16.6836 4.24953 17.396 5.19669 17.8184C6.14385 18.2407 7.2007 18.3514 8.21479 18.1342C8.67124 18.6488 9.23222 19.0602 9.86028 19.3407C10.4883 19.6213 11.169 19.7646 11.8569 19.7612C12.8929 19.7636 13.9029 19.4368 14.7411 18.828C15.5794 18.2192 16.2026 17.3599 16.5209 16.374C17.1952 16.2355 17.8322 15.9547 18.3893 15.5503C18.9464 15.1459 19.4107 14.6272 19.7511 14.0289C20.2718 13.1329 20.4942 12.0945 20.3862 11.0639C20.2782 10.0332 19.8454 9.06351 19.1503 8.29488ZM11.8569 18.4954C11.0061 18.4962 10.1821 18.1974 9.52952 17.6516C9.55821 17.6355 9.6139 17.6077 9.64597 17.5866L13.5108 15.3554C13.6078 15.3003 13.6883 15.2204 13.7441 15.1238C13.7999 15.0273 13.8289 14.9176 13.8281 14.8061V9.35645L15.461 10.299C15.4698 10.3032 15.4774 10.3096 15.483 10.3176C15.4886 10.3256 15.4921 10.3349 15.493 10.3446V14.855C15.493 15.8198 15.1101 16.7451 14.4283 17.4277C13.7465 18.1103 12.8216 18.4943 11.8569 18.4954ZM4.04361 15.1588C3.61756 14.4225 3.46374 13.5599 3.60902 12.7217C3.63771 12.7395 3.68835 12.7698 3.72379 12.7901L7.58949 15.0221C7.68573 15.0785 7.79525 15.1082 7.90678 15.1082C8.01831 15.1082 8.12783 15.0785 8.22407 15.0221L12.9404 12.2948V14.1799C12.9413 14.1896 12.9396 14.1994 12.9356 14.2082C12.9316 14.2171 12.9254 14.2248 12.9176 14.2306L9.01055 16.4853C8.17515 16.9664 7.18307 17.0964 6.25194 16.8469C5.3208 16.5974 4.52662 15.9888 4.04361 15.1546V15.1588ZM3.03098 6.72024C3.45504 5.98284 4.12511 5.41822 4.92375 5.12535V9.71931C4.92318 9.83078 4.95227 9.94041 5.00802 10.0369C5.06378 10.1335 5.1442 10.2134 5.24104 10.2687L9.9582 12.9926L8.31943 13.9386C8.31144 13.944 8.30224 13.9472 8.29265 13.9481C8.28306 13.949 8.27341 13.9475 8.26458 13.9437L4.35837 11.688C3.52373 11.2052 2.91481 10.4108 2.6653 9.47943C2.4158 8.54802 2.5461 7.55567 3.02761 6.72024H3.03098ZM16.4483 9.84251L11.7311 7.11854L13.3623 6.17511C13.3703 6.16981 13.3795 6.16657 13.3891 6.16568C13.3987 6.1648 13.4083 6.1663 13.4172 6.17005L17.3234 8.42568C17.9217 8.77137 18.4091 9.28035 18.7286 9.89302C19.0481 10.5057 19.1865 11.1967 19.1276 11.8852C19.0686 12.5736 18.8147 13.2311 18.3957 13.7805C17.9766 14.3299 17.4097 14.7486 16.7614 14.9875V10.3944C16.7626 10.2826 16.7341 10.1726 16.6786 10.0756C16.6231 9.97853 16.5427 9.89808 16.4458 9.84251H16.4483ZM18.0744 7.39533C18.0457 7.37761 17.9951 7.34723 17.9596 7.32698L14.0939 5.09498C13.9977 5.03861 13.8882 5.0089 13.7766 5.0089C13.6651 5.0089 13.5556 5.03861 13.4594 5.09498L8.7422 7.8181V5.93377C8.74187 5.92407 8.74384 5.91442 8.74794 5.90562C8.75205 5.89682 8.75818 5.88912 8.76583 5.88314L12.672 3.62835C13.2706 3.28335 13.955 3.11594 14.6452 3.14571C15.3354 3.17549 16.0028 3.40123 16.5694 3.79651C17.136 4.19179 17.5782 4.74026 17.8445 5.37774C18.1107 6.01522 18.1899 6.71534 18.0727 7.39617L18.0744 7.39533ZM7.85193 10.7573L6.21823 9.81466C6.20983 9.81002 6.20264 9.80349 6.19722 9.79558C6.1918 9.78767 6.1883 9.7786 6.187 9.7691V5.25868C6.18648 4.56739 6.38303 3.89026 6.75361 3.30668C7.12419 2.72311 7.65345 2.25726 8.27935 1.96375C8.90525 1.67025 9.60184 1.56124 10.2875 1.64951C10.9731 1.73778 11.6194 2.01968 12.1505 2.46214C12.1218 2.47818 12.0704 2.50603 12.0341 2.52712L8.16922 4.75828C8.07238 4.81349 7.99196 4.89346 7.9362 4.99C7.88045 5.08653 7.85136 5.19615 7.85193 5.30763V10.7573ZM8.73882 8.84423L10.84 7.63076L12.9404 8.84423V11.2695L10.8392 12.4829L8.73798 11.2695L8.73882 8.84423Z" fill="currentColor" class="fill-muted-foreground-1"/>
            </g>
            <defs>
            <clipPath id="clip0_399_369933">
            <rect width="80" height="19.424" fill="currentColor" class="fill-muted-foreground-1" transform="translate(0.5 0.344116)"/>
            </clipPath>
            </defs>
          </svg>

<div class="grow px-5">
        <div class="h-full min-h-screen sm:w-md flex flex-col justify-center mx-auto space-y-5">
          
          <div>
            <h1 class="text-xl sm:text-2xl font-semibold text-foreground">
              Log in to your Preline account
            </h1>
            <p class="mt-1 text-sm text-muted-foreground-1">
              Build digital products with Preline.
            </p>
          </div>

<div class="flex flex-col sm:flex-row gap-2">
            <button type="button" class="py-2.5 px-3 w-full 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">
              <svg class="shrink-0 size-4" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_4132_5805)">
                <path d="M32.2566 16.36C32.2566 15.04 32.1567 14.08 31.9171 13.08H16.9166V19.02H25.7251C25.5454 20.5 24.5866 22.72 22.4494 24.22L22.4294 24.42L27.1633 28.1L27.4828 28.14C30.5189 25.34 32.2566 21.22 32.2566 16.36Z" fill="#4285F4"/>
                <path d="M16.9166 32C21.231 32 24.8463 30.58 27.5028 28.12L22.4694 24.2C21.1111 25.14 19.3135 25.8 16.9366 25.8C12.7021 25.8 9.12677 23 7.84844 19.16L7.66867 19.18L2.71513 23L2.65521 23.18C5.2718 28.4 10.6648 32 16.9166 32Z" fill="#34A853"/>
                <path d="M7.82845 19.16C7.48889 18.16 7.28915 17.1 7.28915 16C7.28915 14.9 7.48889 13.84 7.80848 12.84V12.62L2.81499 8.73999L2.6552 8.81999C1.55663 10.98 0.937439 13.42 0.937439 16C0.937439 18.58 1.55663 21.02 2.63522 23.18L7.82845 19.16Z" fill="#FBBC05"/>
                <path d="M16.9166 6.18C19.9127 6.18 21.9501 7.48 23.0886 8.56L27.6027 4.16C24.8263 1.58 21.231 0 16.9166 0C10.6648 0 5.27181 3.6 2.63525 8.82L7.80851 12.84C9.10681 8.98 12.6821 6.18 16.9166 6.18Z" fill="#EB4335"/>
                </g>
                <defs>
                <clipPath id="clip0_4132_5805">
                <rect width="32" height="32" fill="white" transform="translate(0.937439)"/>
                </clipPath>
                </defs>
              </svg>
              Sign in with Google
            </button>

<button type="button" class="py-2.5 px-3 w-full 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">
              <svg class="shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M27.2192 10.9088C27.0336 11.0528 23.7568 12.8992 23.7568 17.0048C23.7568 21.7536 27.9264 23.4336 28.0512 23.4752C28.032 23.5776 27.3888 25.776 25.8528 28.016C24.4832 29.9872 23.0528 31.9552 20.8768 31.9552C18.7008 31.9552 18.1408 30.6912 15.6288 30.6912C13.1808 30.6912 12.3104 31.9968 10.32 31.9968C8.3296 31.9968 6.9408 30.1728 5.344 27.9328C3.4944 25.3024 2 21.216 2 17.3376C2 11.1168 6.0448 7.8176 10.0256 7.8176C12.1408 7.8176 13.904 9.2064 15.232 9.2064C16.496 9.2064 18.4672 7.7344 20.8736 7.7344C21.7856 7.7344 25.0624 7.8176 27.2192 10.9088ZM19.7312 5.1008C20.7264 3.92 21.4304 2.2816 21.4304 0.6432C21.4304 0.416 21.4112 0.1856 21.3696 0C19.7504 0.0608 17.824 1.0784 16.6624 2.4256C15.7504 3.4624 14.8992 5.1008 14.8992 6.7616C14.8992 7.0112 14.9408 7.2608 14.96 7.3408C15.0624 7.36 15.2288 7.3824 15.3952 7.3824C16.848 7.3824 18.6752 6.4096 19.7312 5.1008Z" class="fill-foreground" fill="currentColor"/>
              </svg>
              Sign in with Apple
            </button>
          </div>

<form>
            <div class="space-y-5">
              <div>
                <label for="hs-pro-dale" class="block mb-2 text-sm font-medium text-foreground">
                  Email
                </label>

<input type="email" id="hs-pro-dale" class="py-2 sm:py-2.5 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="you@email.com">
              </div>
              
              <div>
                <div class="flex justify-between items-center mb-2">
                  <label for="hs-pro-dalp" class="block text-sm font-medium text-foreground">
                    Password
                  </label>

<a class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-2 hover:text-foreground decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                    I forgot my password
                  </a>
                </div>

<p class="text-sm text-muted-foreground-1">
            New to Preline?
            <a class="inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
              Sign up
              <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="m9 18 6-6-6-6"/></svg>
            </a>
          </p>
        </div>
      </div>
      
    </main>

Split signup page pairs an onboarding sidebar with social signup buttons, account fields, and consent controls.

<!DOCTYPE html>
<html lang="en" class="relative min-h-full h-full">
  <body class="bg-background">
    
    <main class="flex min-h-full">
      
      <div class="hidden min-h-screen lg:w-100 xl:w-107.5 bg-surface lg:flex flex-col justify-between p-6">
        
        <div class="flex flex-wrap justify-between items-center gap-2">
          <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
          	<svg class="w-[31px] h-auto" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
          		<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0835 3.23358C9.88316 3.23358 3.23548 9.8771 3.23548 18.0723V35.5832H0.583496V18.0723C0.583496 8.41337 8.41851 0.583252 18.0835 0.583252C27.7485 0.583252 35.5835 8.41337 35.5835 18.0723C35.5835 27.7312 27.7485 35.5614 18.0835 35.5614H16.7357V32.911H18.0835C26.2838 32.911 32.9315 26.2675 32.9315 18.0723C32.9315 9.8771 26.2838 3.23358 18.0835 3.23358Z" class="fill-primary" fill="currentColor"/>
          		<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0833 8.62162C12.8852 8.62162 8.62666 12.9245 8.62666 18.2879V35.5833H5.97468V18.2879C5.97468 11.5105 11.3713 5.97129 18.0833 5.97129C24.7954 5.97129 30.192 11.5105 30.192 18.2879C30.192 25.0653 24.7954 30.6045 18.0833 30.6045H16.7355V27.9542H18.0833C23.2815 27.9542 27.54 23.6513 27.54 18.2879C27.54 12.9245 23.2815 8.62162 18.0833 8.62162Z" class="fill-primary" fill="currentColor"/>
          		<path d="M24.8225 18.1012C24.8225 21.8208 21.8053 24.8361 18.0833 24.8361C14.3614 24.8361 11.3442 21.8208 11.3442 18.1012C11.3442 14.3815 14.3614 11.3662 18.0833 11.3662C21.8053 11.3662 24.8225 14.3815 24.8225 18.1012Z" class="fill-primary" fill="currentColor"/>
          	</svg>
          </a>

<div>
          <span class="text-2xl font-medium text-foreground">
            The simplest way to manage your workforce
          </span>

<div class="grow px-5">
        <div class="h-full min-h-screen sm:w-md flex flex-col justify-center mx-auto space-y-5">
          
          <div>
            <h1 class="text-xl sm:text-2xl font-semibold text-foreground">
              Set up your Preline account
            </h1>
            <p class="mt-1 text-sm text-muted-foreground-1">
              Build digital products with Preline.
            </p>
          </div>

<button type="button" class="py-2.5 px-3 w-full 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">
              <svg class="shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M27.2192 10.9088C27.0336 11.0528 23.7568 12.8992 23.7568 17.0048C23.7568 21.7536 27.9264 23.4336 28.0512 23.4752C28.032 23.5776 27.3888 25.776 25.8528 28.016C24.4832 29.9872 23.0528 31.9552 20.8768 31.9552C18.7008 31.9552 18.1408 30.6912 15.6288 30.6912C13.1808 30.6912 12.3104 31.9968 10.32 31.9968C8.3296 31.9968 6.9408 30.1728 5.344 27.9328C3.4944 25.3024 2 21.216 2 17.3376C2 11.1168 6.0448 7.8176 10.0256 7.8176C12.1408 7.8176 13.904 9.2064 15.232 9.2064C16.496 9.2064 18.4672 7.7344 20.8736 7.7344C21.7856 7.7344 25.0624 7.8176 27.2192 10.9088ZM19.7312 5.1008C20.7264 3.92 21.4304 2.2816 21.4304 0.6432C21.4304 0.416 21.4112 0.1856 21.3696 0C19.7504 0.0608 17.824 1.0784 16.6624 2.4256C15.7504 3.4624 14.8992 5.1008 14.8992 6.7616C14.8992 7.0112 14.9408 7.2608 14.96 7.3408C15.0624 7.36 15.2288 7.3824 15.3952 7.3824C16.848 7.3824 18.6752 6.4096 19.7312 5.1008Z" class="fill-foreground" fill="currentColor"/>
              </svg>
              Sign up with Apple
            </button>
          </div>

<div>
                <label for="hs-pro-dale" class="block mb-2 text-sm font-medium text-foreground">
                  Email
                </label>

<input type="email" id="hs-pro-dale" class="py-2 sm:py-2.5 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="you@email.com">
              </div>
              
              <div data-hs-toggle-password-group class="space-y-3">
                
                <div>
                  <label for="hs-pro-dappnp" class="block mb-2 text-sm font-medium text-foreground">
                    Password
                  </label>

<div>
                <label for="hs-pro-dappcn" class="block mb-2 text-sm font-medium text-foreground">
                  Company name
                </label>
              
                <input type="text" id="hs-pro-dappcn" class="py-2 sm:py-2.5 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="e.g. Preline">
              </div>

<div class="flex items-center gap-x-2">
                <input 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" id="hs-pro-dsftac">
                <label for="hs-pro-dsftac" class="text-sm text-foreground">
                  I accept the
                  <a class="inline-flex items-center gap-x-1.5 font-medium text-primary hover:text-primary-hover decoration-2 hover:underline" href="#">
                    Terms and Conditions
                  </a>
                </label>
              </div>

<p class="text-sm text-muted-foreground-1">
            Have an account?
            <a class="inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
              Sign in
              <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="m9 18 6-6-6-6"/></svg>
            </a>
          </p>
        </div>
      </div>
      
    </main>

Authentication Pages

Centered Login Page Pro

Centered Create Account Page Pro

Lock Screen Pro

Split Login Page with Onboarding Sidebar Pro

Split Sign-Up Page with Onboarding Sidebar Pro