Tailwind CSS Form Pages & Settings Blocks

All Blocks
Application UI
Forms
Form Pages & Settings

Form Pages & Settings

Form pages and settings flows for account profiles, notification preferences, workspace settings, payment details, and application workflows.

Account Profile Form Pro

Profile settings card combines avatar controls, personal fields, address inputs, and a save footer.

<div class="p-5 md:p-8 bg-layer border border-layer-line shadow-2xs rounded-xl">
                    
                    <div class="mb-4 xl:mb-8">
                      <h1 class="text-lg font-semibold text-foreground">
                        Profile
                      </h1>
                      <p class="text-sm text-muted-foreground-1">
                        Manage your name, password and account settings.
                      </p>
                    </div>

<form>
                      
                      <div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        
                        <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              Avatar
                            </label>
                          </div>

<div class="grow">
                                <div class="flex items-center gap-x-2">
                                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs 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:border-primary-focus focus:ring-1 focus:ring-primary-focus" >
                                    <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                                    Upload photo
                                  </button>
      
                                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-destructive shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                                    Delete
                                  </button>
                                </div>

<p class="mt-2 text-xs text-muted-foreground-1">
                                  Pick a photo up to 1MB.
                                </p>
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
                        
                      </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        
                        <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              Cover photo
                            </label>
                          </div>

<div class="sm:col-span-8 xl:col-span-4">
                            
                            <div class="space-y-2">
                              <label class="hidden block mb-2 text-sm font-medium text-foreground">
                                Cover
                              </label>
                              <div class="p-12 flex justify-center bg-layer border border-dashed border-layer-line rounded-xl">
                                <div class="text-center">
                                  <svg class="shrink-0 w-16 text-muted-foreground mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/>
                                  </svg>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-1">
                                    <span class="pe-1 font-medium text-foreground">
                                      Drop your files here or
                                    </span>
                                    <label for="hs-pro-dactc" class="relative cursor-pointer bg-transparent font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">
                                      <span>browse</span>
                                      <input id="hs-pro-dactc" type="file" class="sr-only">
                                    </label>
                                  </div>

<p class="mt-1 text-xs text-muted-foreground">
                                    Pick a photo up to 2MB.
                                  </p>
                                </div>
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
                        
                      </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        <h2 class="font-semibold text-foreground">
                          Personal info
                        </h2>

<div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label for="hs-pro-dappinm" class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              Name
                            </label>
                          </div>

<div class="sm:col-span-8 xl:col-span-4">
                            <input id="hs-pro-dappinm" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Enter full name">
          
                            <p class="mt-2 text-sm text-muted-foreground-1">
                              Enter your full name, or a display name you are comfortable with.
                            </p>
                          </div>
                          
                        </div>

<div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label for="hs-pro-dappiun" class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              Username
                            </label>
                          </div>

<div class="sm:col-span-8 xl:col-span-4">
                            <input id="hs-pro-dappiun" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Enter username">
          
                            <p class="mt-2 text-sm text-muted-foreground-1">
                              Enter your display name on Preline public forums.
                            </p>
                          </div>
                          
                        </div>

<div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label for="hs-pro-dappiem" class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              Email
                            </label>
                          </div>

<div class="sm:col-span-8 xl:col-span-4">
                            <input id="hs-pro-dappiem" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="Enter email address">
          
                            <p class="mt-2 text-sm text-muted-foreground-1">
                              Enter the email address you want to use to log in with Preline.
                            </p>
                          </div>
                          
                        </div>

<div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              Location
                            </label>
                          </div>

<div class="sm:col-span-8 xl:col-span-4">
                            
                            <div class="relative">
                              <select  data-hs-select='{
                                  "placeholder": "Country",
                                  "hasSearch": true,
                                  "searchPlaceholder": "Country",
                                  "searchClasses": "block w-full sm:text-sm bg-transparent border-layer-line text-layer-foreground placeholder:text-muted-foreground-1 rounded-lg focus:border-primary-focus focus:ring-primary-focus py-1.5 sm:py-2 px-3",
                                  "searchWrapperClasses": "bg-select p-2 -mx-1 sticky top-0",
                                  "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                                  "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1.5 sm:py-2 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer text-foreground bg-transparent border border-layer-line ring-1 ring-transparent rounded-lg text-start sm:text-sm focus:outline-hidden focus:border-primary-focus focus:ring-primary",
                                  "dropdownClasses": "max-h-64 p-1 pt-0 space-y-0.5 z-80 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",
                                  "dropdownPlacement": "top",
                                  "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-md focus:outline-hidden focus:bg-select-item-focus",
                                  "optionTemplate": "<div class=\"flex items-center w-full\"><div class=\"me-2\" data-icon></div><span data-title></span><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>",
                                  "preventSearchFocus": false,
                                  "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-foreground\" 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=\"m6 9 6 6 6-6\"/></svg></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=\"m6 9 6 6 6-6\"/></svg></div>",
                                  "dropdownScope": "window",
                                  "viewport": "#null.id"
                                }' class="hidden">
                                <option value="">Choose</option>
                                <option value="AF" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/af.png\" alt=\"Afghanistan\" />"}'>
                                  Afghanistan
                                </option>
                                <option value="AX" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ax.png\" alt=\"Aland Islands\" />"}'>
                                  Aland Islands
                                </option>
                                <option value="AL" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/al.png\" alt=\"Albania\" />"}'>
                                  Albania
                                </option>
                                <option value="DZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dz.png\" alt=\"Algeria\" />"}'>
                                  Algeria
                                </option>
                                <option value="AS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/as.png\" alt=\"American Samoa\" />"}'>
                                  American Samoa
                                </option>
                                <option value="AD" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ad.png\" alt=\"Andorra\" />"}'>
                                  Andorra
                                </option>
                                <option value="AO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ao.png\" alt=\"Angola\" />"}'>
                                  Angola
                                </option>
                                <option value="AI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ai.png\" alt=\"Anguilla\" />"}'>
                                  Anguilla
                                </option>
                                <option value="AG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ag.png\" alt=\"Antigua and Barbuda\" />"}'>
                                  Antigua and Barbuda
                                </option>
                                <option value="AR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ar.png\" alt=\"Argentina\" />"}'>
                                  Argentina
                                </option>
                                <option value="AM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/am.png\" alt=\"Armenia\" />"}'>
                                  Armenia
                                </option>
                                <option value="AW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/aw.png\" alt=\"Aruba\" />"}'>
                                  Aruba
                                </option>
                                <option value="AU" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/au.png\" alt=\"Australia\" />"}'>
                                  Australia
                                </option>
                                <option value="AT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/at.png\" alt=\"Austria\" />"}'>
                                  Austria
                                </option>
                                <option value="AZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/az.png\" alt=\"Azerbaijan\" />"}'>
                                  Azerbaijan
                                </option>
                                <option value="BS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bs.png\" alt=\"Bahamas\" />"}'>
                                  Bahamas
                                </option>
                                <option value="BH" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bh.png\" alt=\"Bahrain\" />"}'>
                                  Bahrain
                                </option>
                                <option value="BD" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bd.png\" alt=\"Bangladesh\" />"}'>
                                  Bangladesh
                                </option>
                                <option value="BB" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bb.png\" alt=\"Barbados\" />"}'>
                                  Barbados
                                </option>
                                <option value="BY" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/by.png\" alt=\"Belarus\" />"}'>
                                  Belarus
                                </option>
                                <option value="BE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/be.png\" alt=\"Belgium\" />"}'>
                                  Belgium
                                </option>
                                <option value="BZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bz.png\" alt=\"Belize\" />"}'>
                                  Belize
                                </option>
                                <option value="BJ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bj.png\" alt=\"Benin\" />"}'>
                                  Benin
                                </option>
                                <option value="BM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bm.png\" alt=\"Bermuda\" />"}'>
                                  Bermuda
                                </option>
                                <option value="BT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bt.png\" alt=\"Bhutan\" />"}'>
                                  Bhutan
                                </option>
                                <option value="BO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bo.png\" alt=\"Bolivia (Plurinational State of)\" />"}'>
                                  Bolivia (Plurinational State of)
                                </option>
                                <option value="BQ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bq.png\" alt=\"Bonaire, Sint Eustatius and Saba\" />"}'>
                                  Bonaire, Sint Eustatius and Saba
                                </option>
                                <option value="BA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ba.png\" alt=\"Bosnia and Herzegovina\" />"}'>
                                  Bosnia and Herzegovina
                                </option>
                                <option value="BW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bw.png\" alt=\"Botswana\" />"}'>
                                  Botswana
                                </option>
                                <option value="BR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/br.png\" alt=\"Brazil\" />"}'>
                                  Brazil
                                </option>
                                <option value="IO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/io.png\" alt=\"British Indian Ocean Territory\" />"}'>
                                  British Indian Ocean Territory
                                </option>
                                <option value="BN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bn.png\" alt=\"Brunei Darussalam\" />"}'>
                                  Brunei Darussalam
                                </option>
                                <option value="BG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bg.png\" alt=\"Bulgaria\" />"}'>
                                  Bulgaria
                                </option>
                                <option value="BF" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bf.png\" alt=\"Burkina Faso\" />"}'>
                                  Burkina Faso
                                </option>
                                <option value="BI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bi.png\" alt=\"Burundi\" />"}'>
                                  Burundi
                                </option>
                                <option value="CV" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cv.png\" alt=\"Cabo Verde\" />"}'>
                                  Cabo Verde
                                </option>
                                <option value="KH" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kh.png\" alt=\"Cambodia\" />"}'>
                                  Cambodia
                                </option>
                                <option value="CM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cm.png\" alt=\"Cameroon\" />"}'>
                                  Cameroon
                                </option>
                                <option value="CA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ca.png\" alt=\"Canada\" />"}'>
                                  Canada
                                </option>
                                <option value="KY" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ky.png\" alt=\"Cayman Islands\" />"}'>
                                  Cayman Islands
                                </option>
                                <option value="CF" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cf.png\" alt=\"Central African Republic\" />"}'>
                                  Central African Republic
                                </option>
                                <option value="TD" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/td.png\" alt=\"Chad\" />"}'>
                                  Chad
                                </option>
                                <option value="CL" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cl.png\" alt=\"Chile\" />"}'>
                                  Chile
                                </option>
                                <option value="CN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cn.png\" alt=\"China\" />"}'>
                                  China
                                </option>
                                <option value="CX" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cx.png\" alt=\"Christmas Island\" />"}'>
                                  Christmas Island
                                </option>
                                <option value="CC" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cc.png\" alt=\"Cocos (Keeling) Islands\" />"}'>
                                  Cocos (Keeling) Islands
                                </option>
                                <option value="CO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/co.png\" alt=\"Colombia\" />"}'>
                                  Colombia
                                </option>
                                <option value="KM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/km.png\" alt=\"Comoros\" />"}'>
                                  Comoros
                                </option>
                                <option value="CK" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ck.png\" alt=\"Cook Islands\" />"}'>
                                  Cook Islands
                                </option>
                                <option value="CR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cr.png\" alt=\"Costa Rica\" />"}'>
                                  Costa Rica
                                </option>
                                <option value="HR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hr.png\" alt=\"Croatia\" />"}'>
                                  Croatia
                                </option>
                                <option value="CU" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cu.png\" alt=\"Cuba\" />"}'>
                                  Cuba
                                </option>
                                <option value="CW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cw.png\" alt=\"Curaçao\" />"}'>
                                  Curaçao
                                </option>
                                <option value="CY" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cy.png\" alt=\"Cyprus\" />"}'>
                                  Cyprus
                                </option>
                                <option value="CZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cz.png\" alt=\"Czech Republic\" />"}'>
                                  Czech Republic
                                </option>
                                <option value="CI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ci.png\" alt=Côte dIvoire\" />"}'>
                                  Côte dIvoire
                                </option>
                                <option value="CD" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cd.png\" alt=\"Democratic Republic of the Congo\" />"}'>
                                  Democratic Republic of the Congo
                                </option>
                                <option value="DK" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dk.png\" alt=\"Denmark\" />"}'>
                                  Denmark
                                </option>
                                <option value="DJ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dj.png\" alt=\"Djibouti\" />"}'>
                                  Djibouti
                                </option>
                                <option value="DM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/dm.png\" alt=\"Dominica\" />"}'>
                                  Dominica
                                </option>
                                <option value="DO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/do.png\" alt=\"Dominican Republic\" />"}'>
                                  Dominican Republic
                                </option>
                                <option value="EC" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ec.png\" alt=\"Ecuador\" />"}'>
                                  Ecuador
                                </option>
                                <option value="EG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eg.png\" alt=\"Egypt\" />"}'>
                                  Egypt
                                </option>
                                <option value="SV" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sv.png\" alt=\"El Salvador\" />"}'>
                                  El Salvador
                                </option>
                                <option value="GB-ENG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"England\" />"}'>
                                  England
                                </option>
                                <option value="GQ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gq.png\" alt=\"Equatorial Guinea\" />"}'>
                                  Equatorial Guinea
                                </option>
                                <option value="ER" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/er.png\" alt=\"Eritrea\" />"}'>
                                  Eritrea
                                </option>
                                <option value="EE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ee.png\" alt=\"Estonia\" />"}'>
                                  Estonia
                                </option>
                                <option value="ET" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/et.png\" alt=\"Ethiopia\" />"}'>
                                  Ethiopia
                                </option>
                                <option value="FK" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fk.png\" alt=\"Falkland Islands\" />"}'>
                                  Falkland Islands
                                </option>
                                <option value="FO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fo.png\" alt=\"Faroe Islands\" />"}'>
                                  Faroe Islands
                                </option>
                                <option value="FM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fm.png\" alt=\"Federated States of Micronesia\" />"}'>
                                  Federated States of Micronesia
                                </option>
                                <option value="FJ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fj.png\" alt=\"Fiji\" />"}'>
                                  Fiji
                                </option>
                                <option value="FI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fi.png\" alt=\"Finland\" />"}'>
                                  Finland
                                </option>
                                <option value="FR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/fr.png\" alt=\"France\" />"}'>
                                  France
                                </option>
                                <option value="GF" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gf.png\" alt=\"French Guiana\" />"}'>
                                  French Guiana
                                </option>
                                <option value="PF" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pf.png\" alt=\"French Polynesia\" />"}'>
                                  French Polynesia
                                </option>
                                <option value="TF" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tf.png\" alt=\"French Southern Territories\" />"}'>
                                  French Southern Territories
                                </option>
                                <option value="GA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ga.png\" alt=\"Gabon\" />"}'>
                                  Gabon
                                </option>
                                <option value="GM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gm.png\" alt=\"Gambia\" />"}'>
                                  Gambia
                                </option>
                                <option value="GE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ge.png\" alt=\"Georgia\" />"}'>
                                  Georgia
                                </option>
                                <option value="DE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/de.png\" alt=\"Germany\" />"}'>
                                  Germany
                                </option>
                                <option value="GH" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gh.png\" alt=\"Ghana\" />"}'>
                                  Ghana
                                </option>
                                <option value="GI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gi.png\" alt=\"Gibraltar\" />"}'>
                                  Gibraltar
                                </option>
                                <option value="GR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gr.png\" alt=\"Greece\" />"}'>
                                  Greece
                                </option>
                                <option value="GL" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gl.png\" alt=\"Greenland\" />"}'>
                                  Greenland
                                </option>
                                <option value="GD" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gd.png\" alt=\"Grenada\" />"}'>
                                  Grenada
                                </option>
                                <option value="GP" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gp.png\" alt=\"Guadeloupe\" />"}'>
                                  Guadeloupe
                                </option>
                                <option value="GU" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gu.png\" alt=\"Guam\" />"}'>
                                  Guam
                                </option>
                                <option value="GT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gt.png\" alt=\"Guatemala\" />"}'>
                                  Guatemala
                                </option>
                                <option value="GG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gg.png\" alt=\"Guernsey\" />"}'>
                                  Guernsey
                                </option>
                                <option value="GN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gn.png\" alt=\"Guinea\" />"}'>
                                  Guinea
                                </option>
                                <option value="GW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gw.png\" alt=\"Guinea-Bissau\" />"}'>
                                  Guinea-Bissau
                                </option>
                                <option value="GY" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gy.png\" alt=\"Guyana\" />"}'>
                                  Guyana
                                </option>
                                <option value="HT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ht.png\" alt=\"Haiti\" />"}'>
                                  Haiti
                                </option>
                                <option value="VA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/va.png\" alt=\"Holy See\" />"}'>
                                  Holy See
                                </option>
                                <option value="HN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hn.png\" alt=\"Honduras\" />"}'>
                                  Honduras
                                </option>
                                <option value="HK" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hk.png\" alt=\"Hong Kong\" />"}'>
                                  Hong Kong
                                </option>
                                <option value="HU" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/hu.png\" alt=\"Hungary\" />"}'>
                                  Hungary
                                </option>
                                <option value="IS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/is.png\" alt=\"Iceland\" />"}'>
                                  Iceland
                                </option>
                                <option value="IN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/in.png\" alt=\"India\" />"}'>
                                  India
                                </option>
                                <option value="ID" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/id.png\" alt=\"Indonesia\" />"}'>
                                  Indonesia
                                </option>
                                <option value="IR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ir.png\" alt=\"Iran (Islamic Republic of)\" />"}'>
                                  Iran (Islamic Republic of)
                                </option>
                                <option value="IQ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/iq.png\" alt=\"Iraq\" />"}'>
                                  Iraq
                                </option>
                                <option value="IE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ie.png\" alt=\"Ireland\" />"}'>
                                  Ireland
                                </option>
                                <option value="IM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/im.png\" alt=\"Isle of Man\" />"}'>
                                  Isle of Man
                                </option>
                                <option value="IL" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/il.png\" alt=\"Israel\" />"}'>
                                  Israel
                                </option>
                                <option value="IT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/it.png\" alt=\"Italy\" />"}'>
                                  Italy
                                </option>
                                <option value="JM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jm.png\" alt=\"Jamaica\" />"}'>
                                  Jamaica
                                </option>
                                <option value="JP" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jp.png\" alt=\"Japan\" />"}'>
                                  Japan
                                </option>
                                <option value="JE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/je.png\" alt=\"Jersey\" />"}'>
                                  Jersey
                                </option>
                                <option value="JO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/jo.png\" alt=\"Jordan\" />"}'>
                                  Jordan
                                </option>
                                <option value="KZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kz.png\" alt=\"Kazakhstan\" />"}'>
                                  Kazakhstan
                                </option>
                                <option value="KE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ke.png\" alt=\"Kenya\" />"}'>
                                  Kenya
                                </option>
                                <option value="KI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ki.png\" alt=\"Kiribati\" />"}'>
                                  Kiribati
                                </option>
                                <option value="KW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kw.png\" alt=\"Kuwait\" />"}'>
                                  Kuwait
                                </option>
                                <option value="KG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kg.png\" alt=\"Kyrgyzstan\" />"}'>
                                  Kyrgyzstan
                                </option>
                                <option value="LA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/la.png\" alt=\"Laos\" />"}'>
                                  Laos
                                </option>
                                <option value="LV" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lv.png\" alt=\"Latvia\" />"}'>
                                  Latvia
                                </option>
                                <option value="LB" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lb.png\" alt=\"Lebanon\" />"}'>
                                  Lebanon
                                </option>
                                <option value="LS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ls.png\" alt=\"Lesotho\" />"}'>
                                  Lesotho
                                </option>
                                <option value="LR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lr.png\" alt=\"Liberia\" />"}'>
                                  Liberia
                                </option>
                                <option value="LY" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ly.png\" alt=\"Libya\" />"}'>
                                  Libya
                                </option>
                                <option value="LI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/li.png\" alt=\"Liechtenstein\" />"}'>
                                  Liechtenstein
                                </option>
                                <option value="LT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lt.png\" alt=\"Lithuania\" />"}'>
                                  Lithuania
                                </option>
                                <option value="LU" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lu.png\" alt=\"Luxembourg\" />"}'>
                                  Luxembourg
                                </option>
                                <option value="MO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mo.png\" alt=\"Macau\" />"}'>
                                  Macau
                                </option>
                                <option value="MG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mg.png\" alt=\"Madagascar\" />"}'>
                                  Madagascar
                                </option>
                                <option value="MW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mw.png\" alt=\"Malawi\" />"}'>
                                  Malawi
                                </option>
                                <option value="MY" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/my.png\" alt=\"Malaysia\" />"}'>
                                  Malaysia
                                </option>
                                <option value="MV" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mv.png\" alt=\"Maldives\" />"}'>
                                  Maldives
                                </option>
                                <option value="ML" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ml.png\" alt=\"Mali\" />"}'>
                                  Mali
                                </option>
                                <option value="MT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mt.png\" alt=\"Malta\" />"}'>
                                  Malta
                                </option>
                                <option value="MH" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mh.png\" alt=\"Marshall Islands\" />"}'>
                                  Marshall Islands
                                </option>
                                <option value="MQ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mq.png\" alt=\"Martinique\" />"}'>
                                  Martinique
                                </option>
                                <option value="MR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mr.png\" alt=\"Mauritania\" />"}'>
                                  Mauritania
                                </option>
                                <option value="MU" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mu.png\" alt=\"Mauritius\" />"}'>
                                  Mauritius
                                </option>
                                <option value="YT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/yt.png\" alt=\"Mayotte\" />"}'>
                                  Mayotte
                                </option>
                                <option value="MX" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mx.png\" alt=\"Mexico\" />"}'>
                                  Mexico
                                </option>
                                <option value="MD" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/md.png\" alt=\"Moldova\" />"}'>
                                  Moldova
                                </option>
                                <option value="MC" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mc.png\" alt=\"Monaco\" />"}'>
                                  Monaco
                                </option>
                                <option value="MN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mn.png\" alt=\"Mongolia\" />"}'>
                                  Mongolia
                                </option>
                                <option value="ME" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/me.png\" alt=\"Montenegro\" />"}'>
                                  Montenegro
                                </option>
                                <option value="MS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ms.png\" alt=\"Montserrat\" />"}'>
                                  Montserrat
                                </option>
                                <option value="MA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ma.png\" alt=\"Morocco\" />"}'>
                                  Morocco
                                </option>
                                <option value="MZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mz.png\" alt=\"Mozambique\" />"}'>
                                  Mozambique
                                </option>
                                <option value="MM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mm.png\" alt=\"Myanmar\" />"}'>
                                  Myanmar
                                </option>
                                <option value="NA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/na.png\" alt=\"Namibia\" />"}'>
                                  Namibia
                                </option>
                                <option value="NR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nr.png\" alt=\"Nauru\" />"}'>
                                  Nauru
                                </option>
                                <option value="NP" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/np.png\" alt=\"Nepal\" />"}'>
                                  Nepal
                                </option>
                                <option value="NL" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nl.png\" alt=\"Netherlands\" />"}'>
                                  Netherlands
                                </option>
                                <option value="NC" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nc.png\" alt=\"New Caledonia\" />"}'>
                                  New Caledonia
                                </option>
                                <option value="NZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nz.png\" alt=\"New Zealand\" />"}'>
                                  New Zealand
                                </option>
                                <option value="NI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ni.png\" alt=\"Nicaragua\" />"}'>
                                  Nicaragua
                                </option>
                                <option value="NE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ne.png\" alt=\"Niger\" />"}'>
                                  Niger
                                </option>
                                <option value="NG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ng.png\" alt=\"Nigeria\" />"}'>
                                  Nigeria
                                </option>
                                <option value="NU" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nu.png\" alt=\"Niue\" />"}'>
                                  Niue
                                </option>
                                <option value="NF" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/nf.png\" alt=\"Norfolk Island\" />"}'>
                                  Norfolk Island
                                </option>
                                <option value="KP" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kp.png\" alt=\"North Korea\" />"}'>
                                  North Korea
                                </option>
                                <option value="MK" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mk.png\" alt=\"North Macedonia\" />"}'>
                                  North Macedonia
                                </option>
                                <option value="GB-NIR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Northern Ireland\" />"}'>
                                  Northern Ireland
                                </option>
                                <option value="MP" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mp.png\" alt=\"Northern Mariana Islands\" />"}'>
                                  Northern Mariana Islands
                                </option>
                                <option value="NO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/no.png\" alt=\"Norway\" />"}'>
                                  Norway
                                </option>
                                <option value="OM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/om.png\" alt=\"Oman\" />"}'>
                                  Oman
                                </option>
                                <option value="PK" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pk.png\" alt=\"Pakistan\" />"}'>
                                  Pakistan
                                </option>
                                <option value="PW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pw.png\" alt=\"Palau\" />"}'>
                                  Palau
                                </option>
                                <option value="PA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pa.png\" alt=\"Panama\" />"}'>
                                  Panama
                                </option>
                                <option value="PG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pg.png\" alt=\"Papua New Guinea\" />"}'>
                                  Papua New Guinea
                                </option>
                                <option value="PY" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/py.png\" alt=\"Paraguay\" />"}'>
                                  Paraguay
                                </option>
                                <option value="PE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pe.png\" alt=\"Peru\" />"}'>
                                  Peru
                                </option>
                                <option value="PH" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ph.png\" alt=\"Philippines\" />"}'>
                                  Philippines
                                </option>
                                <option value="PN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pn.png\" alt=\"Pitcairn\" />"}'>
                                  Pitcairn
                                </option>
                                <option value="PL" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pl.png\" alt=\"Poland\" />"}'>
                                  Poland
                                </option>
                                <option value="PT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pt.png\" alt=\"Portugal\" />"}'>
                                  Portugal
                                </option>
                                <option value="PR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pr.png\" alt=\"Puerto Rico\" />"}'>
                                  Puerto Rico
                                </option>
                                <option value="QA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/qa.png\" alt=\"Qatar\" />"}'>
                                  Qatar
                                </option>
                                <option value="CG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/cg.png\" alt=\"Republic of the Congo\" />"}'>
                                  Republic of the Congo
                                </option>
                                <option value="RO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ro.png\" alt=\"Romania\" />"}'>
                                  Romania
                                </option>
                                <option value="RU" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ru.png\" alt=\"Russia\" />"}'>
                                  Russia
                                </option>
                                <option value="RW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rw.png\" alt=\"Rwanda\" />"}'>
                                  Rwanda
                                </option>
                                <option value="RE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/re.png\" alt=\"Réunion\" />"}'>
                                  Réunion
                                </option>
                                <option value="BL" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/bl.png\" alt=\"Saint Barthélemy\" />"}'>
                                  Saint Barthélemy
                                </option>
                                <option value="SH" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sh.png\" alt=\"Saint Helena, Ascension and Tristan da Cunha\" />"}'>
                                  Saint Helena, Ascension and Tristan da Cunha
                                </option>
                                <option value="KN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kn.png\" alt=\"Saint Kitts and Nevis\" />"}'>
                                  Saint Kitts and Nevis
                                </option>
                                <option value="LC" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lc.png\" alt=\"Saint Lucia\" />"}'>
                                  Saint Lucia
                                </option>
                                <option value="MF" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/mf.png\" alt=\"Saint Martin\" />"}'>
                                  Saint Martin
                                </option>
                                <option value="PM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/pm.png\" alt=\"Saint Pierre and Miquelon\" />"}'>
                                  Saint Pierre and Miquelon
                                </option>
                                <option value="VC" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vc.png\" alt=\"Saint Vincent and the Grenadines\" />"}'>
                                  Saint Vincent and the Grenadines
                                </option>
                                <option value="WS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ws.png\" alt=\"Samoa\" />"}'>
                                  Samoa
                                </option>
                                <option value="SM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sm.png\" alt=\"San Marino\" />"}'>
                                  San Marino
                                </option>
                                <option value="ST" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/st.png\" alt=\"Sao Tome and Principe\" />"}'>
                                  Sao Tome and Principe
                                </option>
                                <option value="SA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sa.png\" alt=\"Saudi Arabia\" />"}'>
                                  Saudi Arabia
                                </option>
                                <option value="GB-SCT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Scotland\" />"}'>
                                  Scotland
                                </option>
                                <option value="SN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sn.png\" alt=\"Senegal\" />"}'>
                                  Senegal
                                </option>
                                <option value="RS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/rs.png\" alt=\"Serbia\" />"}'>
                                  Serbia
                                </option>
                                <option value="SC" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sc.png\" alt=\"Seychelles\" />"}'>
                                  Seychelles
                                </option>
                                <option value="SL" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sl.png\" alt=\"Sierra Leone\" />"}'>
                                  Sierra Leone
                                </option>
                                <option value="SG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sg.png\" alt=\"Singapore\" />"}'>
                                  Singapore
                                </option>
                                <option value="SX" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sx.png\" alt=\"Sint Maarten\" />"}'>
                                  Sint Maarten
                                </option>
                                <option value="SK" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sk.png\" alt=\"Slovakia\" />"}'>
                                  Slovakia
                                </option>
                                <option value="SI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/si.png\" alt=\"Slovenia\" />"}'>
                                  Slovenia
                                </option>
                                <option value="SB" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sb.png\" alt=\"Solomon Islands\" />"}'>
                                  Solomon Islands
                                </option>
                                <option value="SO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/so.png\" alt=\"Somalia\" />"}'>
                                  Somalia
                                </option>
                                <option value="ZA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/za.png\" alt=\"South Africa\" />"}'>
                                  South Africa
                                </option>
                                <option value="GS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gs.png\" alt=\"South Georgia and the South Sandwich Islands\" />"}'>
                                  South Georgia and the South Sandwich Islands
                                </option>
                                <option value="KR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/kr.png\" alt=\"South Korea\" />"}'>
                                  South Korea
                                </option>
                                <option value="SS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ss.png\" alt=\"South Sudan\" />"}'>
                                  South Sudan
                                </option>
                                <option value="ES" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/es.png\" alt=\"Spain\" />"}'>
                                  Spain
                                </option>
                                <option value="LK" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/lk.png\" alt=\"Sri Lanka\" />"}'>
                                  Sri Lanka
                                </option>
                                <option value="PS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ps.png\" alt=\"State of Palestine\" />"}'>
                                  State of Palestine
                                </option>
                                <option value="SD" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sd.png\" alt=\"Sudan\" />"}'>
                                  Sudan
                                </option>
                                <option value="SR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sr.png\" alt=\"Suriname\" />"}'>
                                  Suriname
                                </option>
                                <option value="SJ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sj.png\" alt=\"Svalbard and Jan Mayen\" />"}'>
                                  Svalbard and Jan Mayen
                                </option>
                                <option value="SZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sz.png\" alt=\"Swaziland\" />"}'>
                                  Swaziland
                                </option>
                                <option value="SE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/se.png\" alt=\"Sweden\" />"}'>
                                  Sweden
                                </option>
                                <option value="CH" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ch.png\" alt=\"Switzerland\" />"}'>
                                  Switzerland
                                </option>
                                <option value="SY" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/sy.png\" alt=\"Syrian Arab Republic\" />"}'>
                                  Syrian Arab Republic
                                </option>
                                <option value="TW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tw.png\" alt=\"Taiwan\" />"}'>
                                  Taiwan
                                </option>
                                <option value="TJ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tj.png\" alt=\"Tajikistan\" />"}'>
                                  Tajikistan
                                </option>
                                <option value="TZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tz.png\" alt=\"Tanzania\" />"}'>
                                  Tanzania
                                </option>
                                <option value="TH" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/th.png\" alt=\"Thailand\" />"}'>
                                  Thailand
                                </option>
                                <option value="TL" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tl.png\" alt=\"Timor-Leste\" />"}'>
                                  Timor-Leste
                                </option>
                                <option value="TG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tg.png\" alt=\"Togo\" />"}'>
                                  Togo
                                </option>
                                <option value="TK" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tk.png\" alt=\"Tokelau\" />"}'>
                                  Tokelau
                                </option>
                                <option value="TO" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/to.png\" alt=\"Tonga\" />"}'>
                                  Tonga
                                </option>
                                <option value="TT" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tt.png\" alt=\"Trinidad and Tobago\" />"}'>
                                  Trinidad and Tobago
                                </option>
                                <option value="TN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tn.png\" alt=\"Tunisia\" />"}'>
                                  Tunisia
                                </option>
                                <option value="TR" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tr.png\" alt=\"Turkey\" />"}'>
                                  Turkey
                                </option>
                                <option value="TM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tm.png\" alt=\"Turkmenistan\" />"}'>
                                  Turkmenistan
                                </option>
                                <option value="TC" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tc.png\" alt=\"Turks and Caicos Islands\" />"}'>
                                  Turks and Caicos Islands
                                </option>
                                <option value="TV" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/tv.png\" alt=\"Tuvalu\" />"}'>
                                  Tuvalu
                                </option>
                                <option value="UG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ug.png\" alt=\"Uganda\" />"}'>
                                  Uganda
                                </option>
                                <option value="UA" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ua.png\" alt=\"Ukraine\" />"}'>
                                  Ukraine
                                </option>
                                <option value="AE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ae.png\" alt=\"United Arab Emirates\" />"}'>
                                  United Arab Emirates
                                </option>
                                <option value="GB"  data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"United Kingdom\" />"}'>
                                  United Kingdom
                                </option>
                                <option value="UM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/um.png\" alt=\"United States Minor Outlying Islands\" />"}'>
                                  United States Minor Outlying Islands
                                </option>
                                <option value="US"  data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/us.png\" alt=\"United States of America\" />"}'>
                                  United States of America
                                </option>
                                <option value="UY" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uy.png\" alt=\"Uruguay\" />"}'>
                                  Uruguay
                                </option>
                                <option value="UZ" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/uz.png\" alt=\"Uzbekistan\" />"}'>
                                  Uzbekistan
                                </option>
                                <option value="VU" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vu.png\" alt=\"Vanuatu\" />"}'>
                                  Vanuatu
                                </option>
                                <option value="VE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ve.png\" alt=\"Venezuela (Bolivarian Republic of)\" />"}'>
                                  Venezuela (Bolivarian Republic of)
                                </option>
                                <option value="VN" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vn.png\" alt=\"Vietnam\" />"}'>
                                  Vietnam
                                </option>
                                <option value="VG" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vg.png\" alt=\"Virgin Islands (British)\" />"}'>
                                  Virgin Islands (British)
                                </option>
                                <option value="VI" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/vi.png\" alt=\"Virgin Islands (U.S.)\" />"}'>
                                  Virgin Islands (U.S.)
                                </option>
                                <option value="GB-WLS" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/gb.png\" alt=\"Wales\" />"}'>
                                  Wales
                                </option>
                                <option value="WF" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/wf.png\" alt=\"Wallis and Futuna\" />"}'>
                                  Wallis and Futuna
                                </option>
                                <option value="EH" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/eh.png\" alt=\"Western Sahara\" />"}'>
                                  Western Sahara
                                </option>
                                <option value="YE" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/ye.png\" alt=\"Yemen\" />"}'>
                                  Yemen
                                </option>
                                <option value="ZM" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zm.png\" alt=\"Zambia\" />"}'>
                                  Zambia
                                </option>
                                <option value="ZW" data-hs-select-option='{
                                  "icon": "<img class=\"inline-block size-4 rounded-full\" src=\"../../../assets/vendor/svg-country-flags/png100px/zw.png\" alt=\"Zimbabwe\" />"}'>
                                  Zimbabwe
                                </option>
                              </select>
                            </div>
                            
                          </div>
                          
                        </div>

<div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2"></div>
        
                          <div class="sm:col-span-8 xl:col-span-4">
                            <div class="flex gap-x-3">
                              <button type="button" class="py-2 px-3 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 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                Save changes
                              </button>
                              <button type="button" class="py-2 px-3 inline-flex 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">
                                Cancel
                              </button>
                            </div>
                          </div>
                        </div>
                        
                      </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        <div class="inline-flex items-center gap-x-2">
                          <h2 class="font-semibold text-foreground">
                            Password
                          </h2>
          
                          
                          <div class="hs-tooltip inline-block">
                            <svg class="hs-tooltip-toggle shrink-0 ms-1 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                              <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                            </svg>
                            <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-60 p-4 w-96 bg-popover border border-popover-line rounded-xl shadow-xl" role="tooltip">
                              <p class="font-medium text-foreground">
                                Password requirements:
                              </p>
                              <p class="mt-1 text-sm font-normal text-muted-foreground-1">
                                Ensure that these requirements are met:
                              </p>
                              <ul class="mt-1 ps-3.5 list-disc list-outside text-sm font-normal text-muted-foreground-1">
                                <li>
                                  Minimum 8 characters long - the more, the better
                                </li>
                                <li>
                                  At least one lowercase character
                                </li>
                                <li>
                                  At least one uppercase character
                                </li>
                                <li>
                                  At least one number, symbol, or whitespace character
                                </li>
                              </ul>
                            </div>
                          </div>
                          
                        </div>

<div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label for="hs-pro-dappcp" class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              Current password
                            </label>
                          </div>

<div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label for="hs-pro-dappnp" class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              New password
                            </label>
                          </div>

<p class="text-sm text-muted-foreground-2">
                                Level: <span></span>
                              </p>

<div class="flex items-center gap-x-3">
                                <button type="button" class="py-2 px-3 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 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                  Change
                                </button>
                                <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
                                  I forgot my password
                                </a>
                              </div>
                              
                            </div>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        <h2 class="font-semibold text-foreground">
                          Social accounts
                        </h2>

<div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label for="hs-pro-dapsaurl" class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              URL
                            </label>
                          </div>

<p class="mt-3">
                                <button type="button" data-hs-copy-markup='{
                                    "targetSelector": "#hs-content-for-copy",
                                    "wrapperSelector": "#hs-wrapper-for-copy",
                                    "limit": 4
                                  }' class="py-1.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-layer border border-dashed border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                  <svg class="shrink-0 size-3" 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="M5 12h14"/><path d="M12 5v14"/></svg>
                                  Add link
                                </button>
                              </p>
                              
                            </div>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        
                        <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              Connect accounts
                            </label>
                          </div>

<div class="sm:col-span-8 xl:col-span-4">
                            
                            <div class="flex flex-col sm:flex-row gap-2">
                              <button type="button" class="py-2 px-3 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="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>
                                Remove Google
                                <svg class="shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
                                </svg>
                              </button>

<button type="button" class="py-2 px-3 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="size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7326 0C9.96372 0.00130479 8.53211 1.43397 8.53342 3.19935C8.53211 4.96473 9.96503 6.39739 11.7339 6.39869H14.9345V3.20065C14.9358 1.43527 13.5029 0.00260958 11.7326 0C11.7339 0 11.7339 0 11.7326 0M11.7326 8.53333H3.20053C1.43161 8.53464 -0.00130383 9.9673 3.57297e-06 11.7327C-0.00261123 13.4981 1.4303 14.9307 3.19922 14.9333H11.7326C13.5016 14.932 14.9345 13.4994 14.9332 11.734C14.9345 9.9673 13.5016 8.53464 11.7326 8.53333Z" fill="#36C5F0"/>
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M32 11.7327C32.0013 9.9673 30.5684 8.53464 28.7995 8.53333C27.0306 8.53464 25.5976 9.9673 25.5989 11.7327V14.9333H28.7995C30.5684 14.932 32.0013 13.4994 32 11.7327ZM23.4666 11.7327V3.19935C23.4679 1.43527 22.0363 0.00260958 20.2674 0C18.4984 0.00130479 17.0655 1.43397 17.0668 3.19935V11.7327C17.0642 13.4981 18.4971 14.9307 20.2661 14.9333C22.035 14.932 23.4679 13.4994 23.4666 11.7327Z" fill="#2EB67D"/>
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2661 32C22.035 31.9987 23.4679 30.566 23.4666 28.8007C23.4679 27.0353 22.035 25.6026 20.2661 25.6013H17.0656V28.8007C17.0642 30.5647 18.4972 31.9974 20.2661 32ZM20.2661 23.4654H28.7995C30.5684 23.4641 32.0013 22.0314 32 20.266C32.0026 18.5006 30.5697 17.068 28.8008 17.0654H20.2674C18.4985 17.0667 17.0656 18.4993 17.0669 20.2647C17.0656 22.0314 18.4972 23.4641 20.2661 23.4654Z" fill="#ECB22E"/>
                                  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.93953e-07 20.266C-0.00130651 22.0314 1.43161 23.4641 3.20052 23.4654C4.96944 23.4641 6.40235 22.0314 6.40105 20.266V17.0667H3.20052C1.43161 17.068 -0.00130651 18.5006 8.93953e-07 20.266ZM8.53342 20.266V28.7993C8.5308 30.5647 9.96372 31.9974 11.7326 32C13.5016 31.9987 14.9345 30.566 14.9332 28.8007V20.2686C14.9358 18.5032 13.5029 17.0706 11.7339 17.068C9.96372 17.068 8.53211 18.5006 8.53342 20.266C8.53342 20.2673 8.53342 20.266 8.53342 20.266Z" fill="#E01E5A"/>
                                </svg>
                                Connect with Slack
                              </button>
                            </div>

<p class="mt-3 text-sm text-muted-foreground-1">
                              Access your Preline Workspaces with any email address, or by connecting an account.
                            </p>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        
                        <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                              Two-Step Verification
                            </label>
                          </div>

<div class="sm:col-span-8 xl:col-span-4">
                            
                            <div class="p-4 bg-primary-50 text-primary-600 rounded-lg bg-primary-500/10" role="alert" tabindex="-1" aria-labelledby="hs-pro-dasfaaoea-label">
                              <div class="flex">
                                <svg class="shrink-0 size-5 mt-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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>
                                <div class="ms-3 space-y-2">
                                  <h3 id="hs-pro-dasfaaoea-label" class="text-sm text-primary">
                                    Advanced security features are available on Enterprise
                                  </h3>
                                  <button type="button" class="py-2 px-3 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 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                    <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                      <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
                                    </svg>
                                    Upgrade
                                  </button>
                                </div>
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
                        
                      </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        
                        <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label class="inline-block text-sm text-muted-foreground-1">
                              Disable Ads
                              <span class="ms-1 inline-flex items-center gap-x-1.5 px-1.5 text-[10px] font-medium bg-primary text-primary-foreground rounded-full">
                                PRO
                              </span>
                            </label>
                          </div>

<div class="sm:col-span-8 xl:col-span-4">
                            <div class="mt-1.5 flex">
                              <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-dapdach">
                              <label for="hs-pro-dapdach" class="ms-2 text-xs text-muted-foreground-2">
                                With your Pro account, you can disable ads across the site.
                              </label>
                            </div>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        
                        <div class="grid sm:grid-cols-12 gap-y-1.5 2xl:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label class="inline-block text-sm text-muted-foreground-1">
                              Sessions
                            </label>
                          </div>

<div class="flex flex-wrap justify-between items-center gap-2">
                                  <span class="font-medium text-foreground">
                                    Mac
                                  </span>
                                  <span class="inline-flex items-center gap-1.5 py-px px-2 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-500/10 dark:text-primary-500">
                                    Current session
                                  </span>
                                </div>

<ul class="space-y-2">
                                  <li class="flex justify-between items-center">
                                    <span class="text-xs uppercase text-muted-foreground-1">
                                      Location:
                                    </span>
                                    <span class="text-sm text-foreground">
                                      United Kingdom
                                    </span>
                                  </li>

<li class="flex justify-between items-center">
                                    <span class="text-xs uppercase text-muted-foreground-1">
                                      Device:
                                    </span>
                                    <span class="text-sm text-foreground">
                                      Safari - iOS
                                    </span>
                                  </li>

<li class="flex justify-between items-center">
                                    <span class="text-xs uppercase text-muted-foreground-1">
                                      IP address:
                                    </span>
                                    <span class="text-sm text-foreground">
                                      129.562.028.172
                                    </span>
                                  </li>

<li class="flex justify-between items-center">
                                    <span class="text-xs uppercase text-muted-foreground-1">
                                      Recent activity:
                                    </span>
                                    <span class="text-sm text-foreground">
                                      5 minutes ago
                                    </span>
                                  </li>
                                </ul>

<button type="button" class="py-2 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" 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="M12 16v-4"/><path d="M12 8h.01"/></svg>
                                  Don’t recognize something?
                                </button>
                              </div>

<div class="p-5 space-y-4 flex flex-col bg-card border border-card-line rounded-xl">
                                
                                <div class="flex justify-between">
                                  <div class="flex flex-col justify-center items-center size-9.5 bg-layer border border-layer-line rounded-lg">
                                    <svg class="size-5 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="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16"/></svg>
                                  </div>

<div class="flex flex-wrap justify-between items-center gap-2">
                                  <span class="font-medium text-foreground">
                                    Mac
                                  </span>
                                  
                                  <span class="inline-flex items-center gap-1.5 py-px px-2 text-xs font-medium bg-surface text-surface-foreground rounded-full">
                                    Expired
                                  </span>
                                </div>

<li class="flex justify-between items-center">
                                    <span class="text-xs uppercase text-muted-foreground-1">
                                      Recent activity:
                                    </span>
                                    <span class="text-sm text-foreground">
                                      1 month ago
                                    </span>
                                  </li>
                                </ul>

<div class="p-5 space-y-4 flex flex-col bg-card border border-card-line rounded-xl">
                                
                                <div class="flex justify-between">
                                  <div class="flex flex-col justify-center items-center size-9.5 bg-layer border border-layer-line rounded-lg">
                                    <svg class="size-5 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"><rect width="16" height="20" x="4" y="2" rx="2" ry="2"/><line x1="12" x2="12.01" y1="18" y2="18"/></svg>
                                  </div>

<div class="flex flex-wrap justify-between items-center gap-2">
                                  <span class="font-medium text-foreground">
                                    iPad PRO
                                  </span>
                                  
                                </div>

<li class="flex justify-between items-center">
                                    <span class="text-xs uppercase text-muted-foreground-1">
                                      Recent activity:
                                    </span>
                                    <span class="text-sm text-foreground">
                                      2 days ago
                                    </span>
                                  </li>
                                </ul>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                        
                        <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                          <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                            <label class="inline-block text-sm text-muted-foreground-1">
                              Danger zone
                            </label>
                          </div>

<div class="sm:col-span-8 xl:col-span-4">
                            <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-destructive shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                              Delete my account
                            </button>

<p class="mt-3 text-sm text-muted-foreground-1">
                              This will immediately delete all of your data. This action is not reversible, so please continue with caution. <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">Learn more</a>
                            </p>
                          </div>
                          
                        </div>
                        
                      </div>
                      
                    </form>
                    
                  </div>

Open related account profile template

Job Application Form Pro

Full-page application layout pairs role details with a multi-section form and file upload area.

<div class="bg-background">
                      <div class="w-full max-w-5xl px-4 xl:px-0 py-5 sm:py-10 mx-auto">
                        
                        <div class="mb-10">
                          <div class="mb-5">
                            <a class="group inline-flex items-center gap-x-2 font-medium text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" href="careers-job-details.html">
                              <svg class="shrink-0 size-4 transition group-hover:-translate-x-0.5 group-focus:-translate-x-0.5" 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 19-7-7 7-7"/><path d="M19 12H5"/></svg>
                              Senior frontend developer
                            </a>
                          </div>
      
                          <h1 class="font-semibold text-2xl lg:text-3xl text-foreground">
                            Apply for this job
                          </h1>
                        </div>

<div class="grid md:grid-cols-7 gap-10 lg:gap-20">
                          <div class="md:col-span-4">
                            
                            <ol class="[counter-reset:list-item-1] ">
                              
                              <li class="flex gap-x-5 ms-1">
                                
                                <div class="relative last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:-translate-x-[0.5px] after:border-s after:border-line-2">
                                  <span class="flex shrink-0 justify-center items-center size-8 border border-line-2 text-primary font-semibold text-xs uppercase before:content-[counter(list-item)] before:[counter-increment:list-item] rounded-full"></span>
                                </div>

<div class="grow pt-0.5 pb-8 sm:pb-12">
                                  <div class="space-y-3">
                                    <h2 class="text-base text-foreground">
                                      Personal details
                                    </h2>
                
                                    <p class="text-sm text-muted-foreground-1">
                                      We'll need these details in order to be able to contact you.
                                    </p>
                                  </div>

<form>
                                    <div class="mt-10 flex flex-col gap-y-5">
                                      
                                      <div>
                                        <label for="hs-pro-acaffn" class="block mb-2 text-sm text-foreground">
                                          First name
                                        </label>
                    
                                        <input id="hs-pro-acaffn" type="text" class="py-2.5 px-3 block w-full bg-layer border-layer-line text-layer-foreground rounded-lg sm:text-sm placeholder:text-muted-foreground-1 focus:border-line-3 focus:ring-line-3 disabled:opacity-50 disabled:pointer-events-none">
                                      </div>

<div>
                                        <label for="hs-pro-acafln" class="block mb-2 text-sm text-foreground">
                                          Last name
                                        </label>
                    
                                        <input id="hs-pro-acafln" type="text" class="py-2.5 px-3 block w-full bg-layer border-layer-line text-layer-foreground rounded-lg sm:text-sm placeholder:text-muted-foreground-1 focus:border-line-3 focus:ring-line-3 disabled:opacity-50 disabled:pointer-events-none">
                                      </div>

<div>
                                        <label for="hs-pro-acafem" class="block mb-2 text-sm text-foreground">
                                          Email
                                        </label>
                    
                                        <input id="hs-pro-acafem" type="email" class="py-2.5 px-3 block w-full bg-layer border-layer-line text-layer-foreground rounded-lg sm:text-sm placeholder:text-muted-foreground-1 focus:border-line-3 focus:ring-line-3 disabled:opacity-50 disabled:pointer-events-none">
                                      </div>

<div>
                                        <label for="hs-pro-acafph" class="block mb-2 text-sm text-foreground">
                                          Phone
                                        </label>
                    
                                        <input id="hs-pro-acafph" type="tel" class="py-2.5 px-3 block w-full bg-layer border-layer-line text-layer-foreground rounded-lg sm:text-sm placeholder:text-muted-foreground-1 focus:border-line-3 focus:ring-line-3 disabled:opacity-50 disabled:pointer-events-none">
                                      </div>
                                      
                                    </div>
                                  </form>
                                  
                                </div>
                                
                              </li>

<li class="flex gap-x-5 ms-1">
                                
                                <div class="relative last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:-translate-x-[0.5px] after:border-s after:border-line-2">
                                  <span class="flex shrink-0 justify-center items-center size-8 border border-line-2 text-primary font-semibold text-xs uppercase before:content-[counter(list-item)] before:[counter-increment:list-item] rounded-full"></span>
                                </div>

<div class="grow pt-0.5 pb-8 sm:pb-12">
                                  <div class="space-y-3">
                                    <h3 class="text-base text-foreground">
                                      Profile
                                    </h3>
                
                                    <p class="text-sm text-muted-foreground-1">
                                      Please provide your résumé/CV and a brief personal summary to help us get to know you better.
                                    </p>
                                  </div>

<form>
                                    <div class="mt-10 flex flex-col gap-y-5">
                                      
                                      <div>
                                        <label for="hs-pro-acafcv" class="block mb-2 text-sm text-foreground">
                                          Résumé / CV
                                        </label>
                    
                                        <input type="file" name="hs-pro-acafcv" id="hs-pro-acafcv" class="block w-full bg-layer border border-layer-line text-layer-foreground rounded-lg sm:text-sm placeholder:text-muted-foreground-1 focus:border-line-3 focus:ring-line-3 disabled:opacity-50 disabled:pointer-events-none focus:outline-none
                                          file:bg-surface file:border-0
                                          file:me-4
                                          file:py-3 file:px-4">
                                      </div>

<div>
                                        <label for="hs-pro-acafps" class="block mb-2 text-sm text-foreground">
                                          Personal summary
                                        </label>
                    
                                        <textarea id="hs-pro-acafps" class="py-2.5 px-3 sm:py-3 sm:px-4 block w-full bg-layer border-layer-line text-layer-foreground rounded-lg sm:text-sm placeholder:text-muted-foreground-1 focus:border-line-3 focus:ring-line-3 disabled:opacity-50 disabled:pointer-events-none" rows="3" data-hs-textarea-auto-height></textarea>
                                      </div>
                                      
                                    </div>
                                  </form>
                                  
                                </div>
                                
                              </li>

<div class="grow pt-0.5 pb-8 sm:pb-12">
                                  <div class="space-y-3">
                                    <h4 class="text-base text-foreground">
                                      Submit application
                                    </h4>
                
                                    <p class="text-sm text-muted-foreground-1">
                                      In order to contact you with future jobs that you may be interested in, we need to store your personal data.
                                    </p>
                
                                    <p class="text-sm text-muted-foreground-1">
                                      If you are happy for us to do so please click the checkbox below.
                                    </p>
                                  </div>

<form>
                                    <div class="mt-3 flex flex-col gap-y-5">
                                      <div class="flex items-center gap-x-3">
                                        <input id="hs-pro-acafsach" 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">
                                        <label for="hs-pro-acafsach" class="text-sm text-muted-foreground-1">Allow us to process your personal information.</label>
                                      </div>
                                    </div>
                                  </form>
                                  
                                </div>
                                
                              </li>
                              
          
                              
                              <li class="flex gap-x-5 ms-1">
                                <button type="button" class="group inline-flex items-center gap-x-2 py-2 px-3 bg-primary border border-primary-line text-primary-foreground font-medium text-sm rounded-full focus:outline-hidden">
                                  Submit application
                                </button>
                              </li>
                              
                            </ol>
                            
                          </div>

<div class="p-4 flex flex-col justify-end gap-3">
                                  <blockquote class="md:text-lg text-foreground">
                                    " Working with this team is seamless. A calm, professional environment where design and engineering decisions are taken seriously. "

<footer class="mt-4 text-sm text-muted-foreground-1">
                                      Marc Jucob
                                    </footer>
                                  </blockquote>
                                </div>
                              </div>
                              
                            </div>
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open related careers apply template

Personal Information Form Pro

Checkout-style form groups contact fields, address rows, and delivery details in one card.

<div>
                      <label class="sr-only">
                        Thumbnail
                      </label>

<div class="flex flex-wrap items-center gap-3">
                        
                        <img class="shrink-0 size-14 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">

<div class="grow">
                          <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-1.5 text-xs 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" 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" x2="12" y1="3" y2="15"></line></svg>
                            Upload photo
                          </button>
                        </div>
                      </div>
                      
                    </div>

<div class="pt-5 mt-5 border-t border-line-2 md:first:pt-0 md:first:mt-0 md:first:border-t-0">
                      <div class="flex justify-between items-center gap-x-5">
                        <div class="grow">
                          <span class="block font-medium text-sm text-foreground">
                            Name
                          </span>
                          <span class="block text-sm text-muted-foreground-1">
                            James Collins
                          </span>
                        </div>

<button type="button" class="hs-collapse-toggle text-nowrap font-medium text-sm text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-pro-shapiclnm" aria-expanded="false" aria-controls="hs-pro-shapiclnm-heading" data-hs-collapse="#hs-pro-shapiclnm-heading">
                          <span class="hs-collapse-open:hidden block">Edit</span>
                          <span class="hs-collapse-open:block hidden">Cancel</span>
                        </button>
                      </div>

<div id="hs-pro-shapiclnm-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-shapiclnm" role="region">
                        
                        <div class="mt-3 p-px">
                          <label class="sr-only">
                            First name
                          </label>

<div class="w-full max-w-xs space-y-2">
                            <input type="text" class="py-2 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="Name" value="James Collins">
                            <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-secondary border border-secondary-line text-secondary-foreground hover:bg-secondary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-secondary-focus">
                              Save changes
                            </button>
                          </div>
                        </div>
                        
                      </div>
                    </div>

<div class="pt-5 mt-5 border-t border-line-2 md:first:pt-0 md:first:mt-0 md:first:border-t-0">
                      <div class="flex justify-between items-center gap-x-5">
                        <div class="grow">
                          <span class="block font-medium text-sm text-foreground">
                            Email
                          </span>
                          <span class="block text-sm text-muted-foreground-1">
                            jamescollins@site.so
                          </span>
                        </div>

<button type="button" class="hs-collapse-toggle text-nowrap font-medium text-sm text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-pro-shapiclem" aria-expanded="false" aria-controls="hs-pro-shapiclem-heading" data-hs-collapse="#hs-pro-shapiclem-heading">
                          <span class="hs-collapse-open:hidden block">Edit</span>
                          <span class="hs-collapse-open:block hidden">Cancel</span>
                        </button>
                      </div>

<div id="hs-pro-shapiclem-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-shapiclem" role="region">
                        
                        <div class="mt-3 p-px">
                          <label class="sr-only">
                            First name
                          </label>

<div class="w-full max-w-xs space-y-2">
                            <input type="email" class="py-2 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="Email" value="jamescollins@site.so">
                            <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-secondary border border-secondary-line text-secondary-foreground hover:bg-secondary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-secondary-focus">
                              Save changes
                            </button>
                          </div>
                        </div>
                        
                      </div>
                    </div>

<div class="pt-5 mt-5 border-t border-line-2 md:first:pt-0 md:first:mt-0 md:first:border-t-0">
                      <div class="flex justify-between items-center gap-x-5">
                        <div class="grow">
                          <span class="block font-medium text-sm text-foreground">
                            Phone number
                          </span>
                          <span class="block text-sm text-muted-foreground-1">
                            +(01) 222 333 444
                          </span>
                        </div>

<button type="button" class="hs-collapse-toggle text-nowrap font-medium text-sm text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-pro-shapiclph" aria-expanded="false" aria-controls="hs-pro-shapiclph-heading" data-hs-collapse="#hs-pro-shapiclph-heading">
                          <span class="hs-collapse-open:hidden block">Edit</span>
                          <span class="hs-collapse-open:block hidden">Cancel</span>
                        </button>
                      </div>

<div id="hs-pro-shapiclph-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-shapiclph" role="region">
                        
                        <div class="mt-3 p-px">
                          <label class="sr-only">
                            First name
                          </label>

<div class="w-full max-w-xs space-y-2">
                            <input type="text" class="py-2 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="Phone number" value="+(01) 222 333 444">
                            <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-secondary border border-secondary-line text-secondary-foreground hover:bg-secondary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-secondary-focus">
                              Save changes
                            </button>
                          </div>
                        </div>
                        
                      </div>
                    </div>

<div class="pt-5 mt-5 border-t border-line-2 md:first:pt-0 md:first:mt-0 md:first:border-t-0">
                      <div class="flex justify-between items-center gap-x-5">
                        <div class="grow">
                          <span class="block font-medium text-sm text-foreground">
                            Password
                          </span>
                          <span class="block text-sm text-muted-foreground-1">
                            ********
                          </span>
                        </div>

<button type="button" class="hs-collapse-toggle text-nowrap font-medium text-sm text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-pro-shapiclps" aria-expanded="false" aria-controls="hs-pro-shapiclps-heading" data-hs-collapse="#hs-pro-shapiclps-heading">
                          <span class="hs-collapse-open:hidden block">Edit</span>
                          <span class="hs-collapse-open:block hidden">Cancel</span>
                        </button>
                      </div>

<div id="hs-pro-shapiclps-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-shapiclps" role="region">
                        
                        <div class="mt-3 p-px">
                          <label class="sr-only">
                            First name
                          </label>

<div class="w-full max-w-xs space-y-2">
                            <input type="password" class="py-2 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="Old password" >
                            <input type="password" class="py-2 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="New password" >
                            <input type="password" class="py-2 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="Confirm new password" >
                            <button type="button" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-secondary border border-secondary-line text-secondary-foreground hover:bg-secondary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-secondary-focus">
                              Save changes
                            </button>
                          </div>
                        </div>
                        
                      </div>
                    </div>

<div class="pt-5 mt-5 border-t border-line-2 md:first:pt-0 md:first:mt-0 md:first:border-t-0">
                      <div class="flex justify-between items-center gap-x-5">
                        <div class="grow">
                          <span class="block font-medium text-sm text-foreground">
                            Two-factor authentication
                          </span>
                          <span class="block text-sm text-muted-foreground-1">
                            <span class="text-[13px]">Add a layer of security. Require a code in addition to your password.</span>
                          </span>
                        </div>

<div class="pt-5 mt-5 border-t border-line-2 md:first:pt-0 md:first:mt-0 md:first:border-t-0">
                      <div class="flex justify-between items-center gap-x-5">
                        <div class="grow">
                          <span class="block font-medium text-sm text-foreground">
                            Deactivate your account
                          </span>
                          <span class="block text-sm text-muted-foreground-1">
                            <span class="text-[13px]">This will immediately delete all of your data. This action is not reversible, so please continue with caution.</span>
                          </span>
                        </div>

<button type="button" class="whitespace-nowrap font-medium text-sm text-destructive underline underline-offset-4 focus:outline-hidden" data-hs-overlay="#hs-pro-chhdl">
                          Deactivate
                        </button>
                      </div>
                    </div>

Open related personal info template

Account Preferences Form Pro

Long settings form stacks language, time, billing, and account preference sections in one page.

<form>
    
    <div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
      
      <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
        <div class="sm:col-span-4 2xl:col-span-2">
          <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
            Language
          </label>
        </div>

<div class="sm:col-span-8 xl:col-span-6 2xl:col-span-5">
          
          <div class="relative inline-block">
            <select data-hs-select='{
                "placeholder": "Select option...",
                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-7 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                "dropdownClasses": "mt-2 z-50 w-40 max-h-72 p-1 space-y-0.5 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 class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><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>",
                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 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>English (US)</option>
              <option selected>English (UK)</option>
              <option>Spanish</option>
              <option>French</option>
              <option>German</option>
              <option>Italian</option>
              <option>Portuguese</option>
              <option>Russian</option>
              <option>Turkish</option>
              <option>Chinese</option>
              <option>Japanese</option>
              <option>Korean</option>
              <option>Arabic</option>
            </select>
          </div>

<p class="mt-2 text-sm text-muted-foreground-1">
            Change the language used in the user interface.
          </p>
        </div>
        
      </div>
      
    </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
      
      <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
        <div class="sm:col-span-4 2xl:col-span-2">
          <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
            Time zone
          </label>
        </div>

<div class="sm:col-span-8 xl:col-span-6 2xl:col-span-5">
          <div class="flex flex-wrap items-center gap-4">
            
            <div class="flex items-center gap-x-3">
              <label for="hs-pro-daptzts" class="text-sm text-muted-foreground-1">Automatic time zone</label>
              <label for="hs-pro-daptzts" class="relative inline-block w-11 h-6 cursor-pointer">
                <input type="checkbox" id="hs-pro-daptzts" class="peer sr-only">
                <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
              </label>
            </div>

<div class="relative inline-block">
              <select data-hs-select='{
                  "placeholder": "Select option...",
                  "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                  "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-7 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                  "dropdownClasses": "mt-2 z-50 min-w-57.5 max-h-72 p-1 space-y-0.5 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 class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><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>",
                  "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 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 selected>Europe/London (GMT)</option>
                <option>Asia/Singapore (GMT)</option>
              </select>
            </div>
            
          </div>
        </div>
        
      </div>
      
    </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
      
      <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
        <div class="sm:col-span-4 2xl:col-span-2">
          <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
            Date Format
          </label>
        </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
      
      <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
        <div class="sm:col-span-4 2xl:col-span-2">
          <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
            Week start
          </label>
        </div>

<div class="sm:col-span-8 xl:col-span-6 2xl:col-span-5">
          
          <div class="relative inline-block">
            <select data-hs-select='{
                "placeholder": "Select option...",
                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-7 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                "dropdownClasses": "mt-2 z-50 w-40 max-h-72 p-1 space-y-0.5 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 class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><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>",
                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 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 selected>Monday</option>
              <option>Tuesday</option>
              <option>Wednesday</option>
              <option>Thursday</option>
              <option>Friday</option>
              <option>Saturday</option>
              <option>Sunday</option>
            </select>
          </div>

<p class="mt-2 text-sm text-muted-foreground-1">
            This will change how all calendars in your app look.
          </p>
        </div>
        
      </div>
      
    </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
      
      <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
        <div class="sm:col-span-4 2xl:col-span-2">
          <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
            Weekend
          </label>
        </div>

<div class="sm:col-span-8 xl:col-span-6 2xl:col-span-5">
          
          <div class="relative inline-block">
            <select data-hs-select='{
                "placeholder": "Select option...",
                "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-3 pe-7 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary",
                "dropdownClasses": "mt-2 z-50 w-40 max-h-72 p-1 space-y-0.5 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 class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><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>",
                "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 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>Monday</option>
              <option>Tuesday</option>
              <option>Wednesday</option>
              <option>Thursday</option>
              <option>Friday</option>
              <option>Saturday</option>
              <option selected>Sunday</option>
            </select>
          </div>
          
        </div>
        
      </div>
      
    </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
      
      <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
        <div class="sm:col-span-4 2xl:col-span-2">
          <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
            Appearance
          </label>
        </div>

<div class="sm:col-span-8 xl:col-span-6 2xl:col-span-5">
          <p class="text-sm text-muted-foreground-1">
            Choose how Preline looks to you. Select a single theme, or sync with your system and automatically switch between day and night themes.
          </p>

<p class="mt-3 text-sm font-semibold text-foreground">
            Theme mode
          </p>
          
          <p class="text-sm text-muted-foreground-1">
            Preline theme will match your system active settings
          </p>

<div class="mt-5">
            
            <div class="grid grid-cols-3 gap-x-2 sm:gap-x-4">
              
              <label for="hs-pro-dapta1" class="w-full sm:w-auto flex flex-col bg-layer text-center cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary">
                <input type="radio" id="hs-pro-dapta1" name="hs-pro-dapta" class="hidden" checked>
                <img class="rounded rounded-t-[14px] -mt-px" src="https://preline.co/assets/svg/pro/account-system-image.svg" alt="System">
                <span class="py-3 px-2 text-sm font-semibold text-foreground">
                  System
                </span>
              </label>

<label for="hs-pro-dapta2" class="w-full sm:w-auto flex flex-col bg-layer text-center cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary">
                <input type="radio" id="hs-pro-dapta2" name="hs-pro-dapta" class="hidden" >
                <img class="rounded rounded-t-[14px] -mt-px" src="https://preline.co/assets/svg/pro/account-light-image.svg" alt="Light">
                <span class="py-3 px-2 text-sm font-semibold text-foreground">
                  Light
                </span>
              </label>

<label for="hs-pro-dapta3" class="w-full sm:w-auto flex flex-col bg-layer text-center cursor-pointer rounded-xl ring-1 ring-layer-line has-checked:ring-2 has-checked:ring-primary">
                <input type="radio" id="hs-pro-dapta3" name="hs-pro-dapta" class="hidden" >
                <img class="rounded rounded-t-[14px] -mt-px" src="https://preline.co/assets/svg/pro/account-dark-image.svg" alt="Dark">
                <span class="py-3 px-2 text-sm font-semibold text-foreground">
                  Dark
                </span>
              </label>
              
            </div>
            
          </div>
        </div>
        
      </div>
      
    </div>

<div class="flex gap-x-3">
      <button type="button" class="py-2 px-3 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 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
        Save changes
      </button>
      <button type="button" class="py-2 px-3 inline-flex 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">
        Cancel
      </button>
    </div>
    
  </form>
  
</div>

Notification Preferences Table Pro

Settings table organizes notification types across multiple opt-in columns with checkbox rows.

<div class="space-y-5">
  
  <div class="hidden sticky top-14 inset-s-0 bg-layer md:block">
    
    <div class="grid md:grid-cols-5 lg:gap-x-3 md:gap-x-6 p-3 md:p-5">
      <div class="col-span-2 self-center">
        <h2 class="font-semibold text-foreground">
          Notify me about
        </h2>
      </div>

<div class="col-span-1 text-center">
        <svg class="shrink-0 size-5 mx-auto 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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
        <h3 class="mt-2 text-sm font-medium text-foreground">
          Email
        </h3>
      </div>

<div class="col-span-1 text-center">
        <svg class="shrink-0 size-5 mx-auto 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"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
        <h3 class="mt-2 text-sm font-medium text-foreground">
          Desktop
        </h3>
        <p class="text-xs text-muted-foreground-1">
          Push notification
        </p>
      </div>

<div class="col-span-1 text-center">
        <svg class="shrink-0 size-5 mx-auto 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"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/></svg>
        <h3 class="mt-2 text-sm font-medium text-foreground">
          Mobile
        </h3>
        <p class="text-xs text-muted-foreground-1">
          Push notification
        </p>
      </div>
      
    </div>
    
  </div>

<ul class="grid md:grid-cols-5 md:gap-x-6 bg-surface rounded-lg p-3 md:p-5">
    
    <li class="md:col-span-2">
      <h3 class="font-semibold text-foreground">
        General
      </h3>
    </li>

<li class="hidden md:block md:col-span-1 md:text-center">
      <button type="button" class="text-xs text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline">
        Toggle all
      </button>
    </li>

<ul class="grid md:grid-cols-5 md:items-center gap-1.5 md:gap-6 px-3 md:px-5">
    
    <li class="md:col-span-2">
      <p class="text-sm font-medium text-foreground">
        Mentions
      </p>
      <p class="text-sm text-muted-foreground-1">
        Receive a notification if a teammate mentions you in a note.
      </p>
    </li>

<li class="col-span-1">
      <div class="grid grid-cols-2 items-center md:block">
        <span class="md:hidden text-sm text-muted-foreground-1">
          Email
        </span>
        <div class="text-end md:text-center">
          <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" checked>
        </div>
      </div>
    </li>

<li class="col-span-1">
      <div class="grid grid-cols-2 items-center md:block">
        <span class="md:hidden text-sm text-muted-foreground-1">
          Desktop
        </span>
        <div class="text-end md:text-center">
          <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">
        </div>
      </div>
    </li>

<li class="col-span-1">
      <div class="grid grid-cols-2 items-center md:block">
        <span class="md:hidden text-sm text-muted-foreground-1">
          Mobile
        </span>
        <div class="text-end md:text-center">
          <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">
        </div>
      </div>
    </li>
    
  </ul>

<ul class="grid md:grid-cols-5 md:items-center gap-1.5 md:gap-6 px-3 md:px-5">
    
    <li class="md:col-span-2">
      <p class="text-sm font-medium text-foreground">
        Service provider updates
      </p>
      <p class="text-sm text-muted-foreground-1">
        Receive a notification when there are changes to the list of Preline service providers
      </p>
    </li>

<ul class="grid md:grid-cols-5 md:items-center gap-1.5 md:gap-6 px-3 md:px-5">
    
    <li class="md:col-span-2">
      <p class="text-sm font-medium text-foreground">
        Webhooks
      </p>
      <p class="text-sm text-muted-foreground-1">
        Receive a notification when webhooks are consistently failing.
      </p>
    </li>

<ul class="grid md:grid-cols-5 md:items-center gap-1.5 md:gap-6 px-3 md:px-5">
    
    <li class="md:col-span-2">
      <p class="text-sm font-medium text-foreground">
        Task Assignments
      </p>
      <p class="text-sm text-muted-foreground-1">
        Notify me when I'm assigned a task
      </p>
    </li>

<li class="col-span-1">
      <div class="grid grid-cols-2 items-center md:block">
        <span class="md:hidden text-sm text-muted-foreground-1">
          Desktop
        </span>
        <div class="text-end md:text-center">
          <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" checked>
        </div>
      </div>
    </li>

<li class="col-span-1">
      <div class="grid grid-cols-2 items-center md:block">
        <span class="md:hidden text-sm text-muted-foreground-1">
          Mobile
        </span>
        <div class="text-end md:text-center">
          <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" checked>
        </div>
      </div>
    </li>
    
  </ul>

<ul class="grid md:grid-cols-5 md:items-center gap-1.5 md:gap-6 px-3 md:px-5">
    
    <li class="md:col-span-2">
      <p class="text-sm font-medium text-foreground">
        Tasks completed
      </p>
      <p class="text-sm text-muted-foreground-1">
        Only for tasks youʼve created or assigned
      </p>
    </li>

<li class="col-span-1">
      <div class="grid grid-cols-2 items-center md:block">
        <span class="md:hidden text-sm text-muted-foreground-1">
          Desktop
        </span>
        <div class="text-end md:text-center">
          <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" checked>
        </div>
      </div>
    </li>

<li class="col-span-1">
      <div class="grid grid-cols-2 items-center md:block">
        <span class="md:hidden text-sm text-muted-foreground-1">
          Mobile
        </span>
        <div class="text-end md:text-center">
          <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" checked>
        </div>
      </div>
    </li>
    
  </ul>

<ul class="grid md:grid-cols-5 md:items-center gap-1.5 md:gap-6 px-3 md:px-5">
    
    <li class="md:col-span-2">
      <p class="text-sm font-medium text-foreground">
        Tasks uncompleted
      </p>
      <p class="text-sm text-muted-foreground-1">
        Only for tasks youʼve created or assigned
      </p>
    </li>

<li class="col-span-1">
      <div class="grid grid-cols-2 items-center md:block">
        <span class="md:hidden text-sm text-muted-foreground-1">
          Desktop
        </span>
        <div class="text-end md:text-center">
          <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" checked>
        </div>
      </div>
    </li>

<li class="col-span-1">
      <div class="grid grid-cols-2 items-center md:block">
        <span class="md:hidden text-sm text-muted-foreground-1">
          Mobile
        </span>
        <div class="text-end md:text-center">
          <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" checked>
        </div>
      </div>
    </li>
    
  </ul>
  
</div>

Workspace Settings Form Pro

Workspace settings page combines branding controls, workspace fields, member roles, and destructive actions.

<div class="p-5 md:p-8 bg-layer border border-layer-line shadow-2xs rounded-xl">
                      
                      <div class="mb-4 xl:mb-8">
                        <h1 class="text-lg font-semibold text-foreground">
                          Workspace
                        </h1>
                        <p class="text-sm text-muted-foreground-1">
                          Change the settings for your current workspace here.
                        </p>
                      </div>

<form>
                        
                        <div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                          
                          <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                            <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                              <label for="hs-pro-dapsawn" class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                                Workspace name
                              </label>
                            </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                          
                          <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                            <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                              <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                                Workspace logo
                              </label>
                            </div>

<div class="grow">
                                  <div class="flex items-center gap-x-2">
                                    <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs 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:border-primary-focus focus:ring-1 focus:ring-primary-focus" >
                                      <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                                      Upload photo
                                    </button>
      
                                    <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-destructive shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" disabled>
                                      Delete
                                    </button>
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                          
                          <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                            <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                              <label for="hs-pro-dapsawurl" class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                                Workspace URL
                              </label>
                            </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                          
                          <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                            <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                              <label class="sm:mt-2.5 inline-block text-sm text-muted-foreground-1">
                                Organizations
                              </label>
                            </div>

<div class="sm:col-span-8 xl:col-span-6 2xl:col-span-4">
                              
                              <ul class="flex flex-col bg-layer border border-layer-line rounded-xl -space-y-px">
                                
                                <li class="p-4 border-t border-line-2 first:border-t-0">
                                  <div class="flex gap-x-3">
                                    <svg class="shrink-0 mt-1 size-8" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M16.0355 1.75926C10.6408 1.75926 5.30597 1.49951 0.0111241 1C-0.288584 7.23393 5.50578 13.1282 12.7987 14.5668L13.9975 14.7266C14.3372 12.4289 15.9956 3.7773 16.595 1.73928C16.4152 1.75926 16.2353 1.75926 16.0355 1.75926Z" fill="#A49DFF"/>
                                      <path d="M16.615 1.75926C16.615 1.75926 25.2266 7.9932 28.5234 16.3451C30.0419 11.3499 31.1608 6.15498 32 1C26.8051 1.49951 21.71 1.75926 16.615 1.75926Z" fill="#28289A"/>
                                      <path d="M13.9975 14.7466L13.8177 15.9455C13.8177 15.9455 12.2592 28.4133 23.1886 31.9699C25.2266 26.8748 27.0049 21.6599 28.5234 16.3251C21.9698 15.8456 13.9975 14.7466 13.9975 14.7466Z" fill="#5ADCEE"/>
                                      <path d="M16.6149 1.75927C16.0155 3.79729 14.3571 12.4089 14.0175 14.7466C14.0175 14.7466 21.9897 15.8456 28.5233 16.3251C25.1866 7.9932 16.6149 1.75927 16.6149 1.75927Z" fill="#7878FF"/>
                                    </svg>
                                    <div>
                                      <p class="text-sm text-muted-foreground-1">
                                        <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">Guideline</a> outside collaborator on 1 projects
                                      </p>
                                    </div>
                                    <div class="ms-auto">
                                      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-destructive hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-chhdl">
                                        Leave
                                      </button>
                                    </div>
                                  </div>
                                </li>

<li class="p-4 border-t border-line-2 first:border-t-0">
                                  <div class="flex gap-x-3">
                                    <svg class="shrink-0 mt-1 size-8" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M16 16C13.8 16 12 14.2 12 12C12 9.8 13.78 8 16 8C18.2 8 20 9.78 20 12C20 14.22 18.22 16 16 16ZM16 0C9.38 0 4 5.38 4 12C4 18.64 9.38 24 16 24C22.62 24 28 18.64 28 12.02C28 12.02 28 12.02 28 12C28 5.38 22.64 0 16 0Z" fill="#5C54FF"/>
                                      <path fill-rule="evenodd" clip-rule="evenodd" d="M8 24C5.8 24 4 25.78 4 28C4 30.2 5.78 32 8 32C10.2 32 12 30.22 12 28C12 25.78 10.22 24 8 24Z" fill="#5C54FF"/>
                                    </svg>
                                    <div>
                                      <p class="text-sm text-muted-foreground-1">
                                        <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">prosperops</a> member and collaborator on 1 projects
                                      </p>
                                    </div>
                                    <div class="ms-auto">
                                      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-destructive hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-chhdl">
                                        Leave
                                      </button>
                                    </div>
                                  </div>
                                </li>
                                
  
                                
                                <li class="p-4 border-t border-line-2 first:border-t-0">
                                  <div class="flex gap-x-3">
                                    <svg class="shrink-0 mt-1 size-8" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/>
                                      <path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/>
                                    </svg>
                                    <div>
                                      <p class="text-sm text-muted-foreground-1">
                                        <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">Notion</a> member and collaborator on 3 projects
                                      </p>
                                    </div>
                                    <div class="ms-auto">
                                      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-layer border border-layer-line text-destructive hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-chhdl">
                                        Leave
                                      </button>
                                    </div>
                                  </div>
                                </li>
                                
                              </ul>
                              
                            </div>
                            
                          </div>
                          
                        </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                          
                          <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                            <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                              <label class="inline-block text-sm text-muted-foreground-1">
                                Export Workspace data
                              </label>
                            </div>

<div class="sm:col-span-8 xl:col-span-6 2xl:col-span-4">
                              <button type="button" class="py-2 px-3 inline-flex 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-3.5" 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                Get started
                              </button>

<ul class="grid md:grid-cols-12 md:items-center gap-2 md:gap-6 py-3 border-t border-line-2">
                                    
                                    <li class="md:col-span-5">
                                      <div class="flex md:block gap-x-2">
                                        <span class="md:hidden min-w-25 text-sm text-muted-foreground-2">
                                          Type:
                                        </span>
                                        <p class="text-sm font-medium text-foreground">
                                          CSV Export
                                        </p>
                                      </div>
                                    </li>

<li class="col-span-3">
                                      <div class="flex md:block gap-x-2">
                                        <span class="md:hidden min-w-25 text-sm text-muted-foreground-2">
                                          Date:
                                        </span>
                                        <p class="text-sm text-muted-foreground-1">
                                          Mar 12, 2023
                                        </p>
                                      </div>
                                    </li>

<li class="col-span-3">
                                      <div class="flex md:block gap-x-2">
                                        <span class="md:hidden min-w-25 text-sm text-muted-foreground-2">
                                          Status:
                                        </span>
                                        <p class="text-sm text-primary">
                                          Progress 31%
                                        </p>
                                      </div>
                                    </li>

<li class="col-span-1">
                                      <div class="flex md:block gap-x-2">
                                        <span class="md:hidden min-w-25 text-sm text-muted-foreground-2">
                                          Download:
                                        </span>
                                        <button type="button" class="size-7 inline-flex justify-center items-center gap-x-2 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" disabled>
                                          <svg class="shrink-0 size-3.5" 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                        </button>
                                      </div>
                                    </li>
                                    
                                  </ul>

<li class="col-span-3">
                                      <div class="flex md:block gap-x-2">
                                        <span class="md:hidden min-w-25 text-sm text-muted-foreground-2">
                                          Date:
                                        </span>
                                        <p class="text-sm text-muted-foreground-1">
                                          Jan 12, 2023
                                        </p>
                                      </div>
                                    </li>

<li class="col-span-3">
                                      <div class="flex md:block gap-x-2">
                                        <span class="md:hidden min-w-25 text-sm text-muted-foreground-2">
                                          Status:
                                        </span>
                                        <div class="flex items-center gap-x-2">
                                          <p class="text-sm text-muted-foreground-1">
                                            Completed
                                          </p>
                                          <svg class="shrink-0 size-3.5 text-teal-500" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                          </svg>
                                        </div>
                                      </div>
                                    </li>

<li class="col-span-1">
                                      <div class="flex md:block gap-x-2">
                                        <span class="md:hidden min-w-25 text-sm text-muted-foreground-2">
                                          Download:
                                        </span>
                                        <button type="button" class="size-7 inline-flex justify-center items-center gap-x-2 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-3.5" 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                                        </button>
                                      </div>
                                    </li>
                                    
                                  </ul>
                                  
                                </div>
                                
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>

<div class="py-6 sm:py-8 space-y-5 border-t border-line-2 first:border-t-0">
                          
                          <div class="grid sm:grid-cols-12 gap-y-1.5 sm:gap-y-0 sm:gap-x-5">
                            <div class="sm:col-span-4 xl:col-span-3 2xl:col-span-2">
                              <label class="inline-block text-sm text-muted-foreground-1">
                                Danger zone
                              </label>
                            </div>

<p class="mt-3 text-sm text-muted-foreground-1">
                                This will immediately delete all of your data. This action is not reversible, so please continue with caution. <a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">Learn more</a>
                              </p>
                            </div>
                            
                          </div>
                          
                        </div>
                        
                      </form>
                      
                    </div>

Open related account workspace template

Account Settings Page Free

Standalone settings page stacks profile fields, contact details, and password actions in bordered sections.

<div class="max-w-4xl px-4 py-10 sm:px-6 lg:px-8 mx-auto">
  <div class="bg-layer rounded-xl shadow-xs p-4 sm:p-7">
    <div class="mb-8">
      <h2 class="text-xl font-bold text-foreground">
        Profile
      </h2>
      <p class="text-sm text-muted-foreground-2">
        Manage your name, password and account settings.
      </p>
    </div>

<form>
      
      <div class="grid sm:grid-cols-12 gap-2 sm:gap-6">
        <div class="sm:col-span-3">
          <label class="inline-block text-sm text-foreground mt-2.5">
            Profile photo
          </label>
        </div>

<div class="sm:col-span-9">
          <div class="flex items-center gap-5">
            <img class="inline-block size-16 rounded-full ring-2 ring-layer" src="https://preline.co/assets/img/160x160/img1.jpg" alt="Avatar">
            <div class="flex gap-x-2">
              <div>
                <button type="button" class="py-2 px-3 inline-flex 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" 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                  Upload photo
                </button>
              </div>
            </div>
          </div>
        </div>

<div class="sm:col-span-3">
          <label for="af-account-full-name" class="inline-block text-sm text-foreground mt-2.5">
            Full name
          </label>
          <div class="hs-tooltip inline-block">
            <svg class="hs-tooltip-toggle ms-1 inline-block size-3 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
              <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
            </svg>
            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible w-40 text-center z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
              Displayed on public forums, such as Preline
            </span>
          </div>
        </div>

<div class="sm:col-span-3">
          <label for="af-account-email" class="inline-block text-sm text-foreground mt-2.5">
            Email
          </label>
        </div>

<div class="sm:col-span-3">
          <label for="af-account-password" class="inline-block text-sm text-foreground mt-2.5">
            Password
          </label>
        </div>

<div class="sm:col-span-3">
          <div class="inline-block">
            <label for="af-account-phone" class="inline-block text-sm text-foreground mt-2.5">
              Phone
            </label>
            <span class="text-sm text-muted-foreground">
              (Optional)
            </span>
          </div>
        </div>

<div class="sm:col-span-9">
          <div class="sm:flex">
            <input id="af-account-phone" type="text" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line text-foreground placeholder:text-muted-foreground-1 shadow-2xs -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg sm:text-sm relative focus:z-10 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="+x(xxx)xxx-xx-xx">
            <select class="py-1.5 sm:py-2 px-3 pe-9 block w-full sm:w-auto bg-layer border-layer-line text-layer-foreground shadow-2xs -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg sm:text-sm relative focus:z-10 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
              <option selected>Mobile</option>
              <option>Home</option>
              <option>Work</option>
              <option>Fax</option>
            </select>
          </div>

<p class="mt-3">
            <a class="inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
              <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="M8 12h8"/><path d="M12 8v8"/></svg>
              Add phone
            </a>
          </p>
        </div>

<div class="sm:col-span-3">
          <label for="af-account-gender-checkbox" class="inline-block text-sm text-foreground mt-2.5">
            Gender
          </label>
        </div>

<label for="af-account-gender-checkbox-female" class="flex items-center py-2 px-3 w-full bg-layer border border-layer-line text-foreground placeholder:text-muted-foreground-1 shadow-2xs -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-sm relative focus:z-10 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
              <input type="radio" name="af-account-gender-checkbox" 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="af-account-gender-checkbox-female">
              <span class="ms-3 sm:text-sm text-muted-foreground-1">Female</span>
            </label>

<label for="af-account-gender-checkbox-other" class="flex items-center py-2 px-3 w-full bg-layer border border-layer-line text-foreground placeholder:text-muted-foreground-1 shadow-2xs -mt-px -ms-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-s-lg sm:mt-0 sm:first:ms-0 sm:first:rounded-se-none sm:last:rounded-es-none sm:last:rounded-e-lg text-sm relative focus:z-10 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
              <input type="radio" name="af-account-gender-checkbox" 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="af-account-gender-checkbox-other">
              <span class="ms-3 sm:text-sm text-muted-foreground-1">Other</span>
            </label>
          </div>
        </div>

<div class="mt-5 flex justify-end gap-x-2">
        <button type="button" class="py-2 px-3 inline-flex 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">
          Cancel
        </button>
        <button type="button" class="py-2 px-3 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">
          Save changes
        </button>
      </div>
    </form>
  </div>
  
</div>

App Submission Form Free

Submission page combines app metadata fields, upload areas, and review settings in a single long form.

<div class="max-w-4xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <form>
    
    <div class="bg-layer rounded-xl shadow-xs">
      <div class="relative h-40 rounded-t-xl bg-[url('https://preline.co/assets/svg/examples/abstract-bg-1.svg')] bg-no-repeat bg-cover bg-center">
        <div class="absolute top-0 inset-e-0 p-4">
          <button type="button" class="py-2 px-3 inline-flex 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 focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
            <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
            Upload header
          </button>
        </div>
      </div>

<div class="pt-0 p-4 sm:pt-0 sm:p-7">
        
        <div class="space-y-4 sm:space-y-6">
          <div>
            <label class="sr-only">
              Product photo
            </label>

<div class="flex flex-col sm:flex-row sm:items-center sm:gap-x-5">
              <img class="-mt-8 relative z-10 inline-block size-24 mx-auto sm:mx-0 rounded-full ring-4 ring-layer" src="https://preline.co/assets/img/160x160/img1.jpg" alt="Avatar">
              
              <div class="mt-4 sm:mt-auto sm:mb-1.5 flex justify-center sm:justify-start gap-2">
                <button type="button" class="py-2 px-3 inline-flex 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 focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                  <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
                  Upload logo
                </button>
                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-red-500 shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                  Delete
                </button>
              </div>
            </div>
          </div>

<div class="space-y-2">
            <label for="af-submit-app-project-name" class="inline-block text-sm font-medium text-foreground mt-2.5">
              Project name
            </label>

<div class="space-y-2">
            <label for="af-submit-project-url" class="inline-block text-sm font-medium text-foreground mt-2.5">
              Project URL
            </label>

<div class="space-y-2">
            <label for="af-submit-app-upload-images" class="inline-block text-sm font-medium text-foreground mt-2.5">
              Preview image
            </label>

<label for="af-submit-app-upload-images" class="group p-4 sm:p-7 block cursor-pointer text-center bg-layer border-2 border-dashed border-layer-line rounded-lg focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">
              <input id="af-submit-app-upload-images" name="af-submit-app-upload-images" type="file" class="sr-only">
              <svg class="size-10 mx-auto text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"/>
                <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>
              </svg>
              <span class="mt-2 block text-sm text-foreground">
                Browse your device or <span class="group-hover:text-primary-hover text-primary">drag 'n drop'</span>
              </span>
              <span class="mt-1 block text-xs text-muted-foreground-1">
                Maximum file size is 2 MB
              </span>
            </label>
          </div>

<div class="space-y-2">
            <label for="af-submit-app-category" class="inline-block text-sm font-medium text-foreground mt-2.5">
              Category
            </label>

<select id="af-submit-app-category" class="py-1.5 sm:py-2 px-3 pe-9 block w-full bg-layer border-layer-line shadow-2xs sm:text-sm rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
              <option selected>Select a category</option>
              <option>Ecommerce</option>
              <option>Finance</option>
              <option>Marketplace</option>
              <option>Social</option>
              <option>Others</option>
            </select>
          </div>

<div class="space-y-2">
            <label for="af-submit-app-description" class="inline-block text-sm font-medium text-foreground mt-2.5">
              Description
            </label>

<div class="mt-5 flex justify-center gap-x-2">
          <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">
            Submit your project
          </button>
        </div>
      </div>
    </div>
    
  </form>
</div>

Payment Details Form Free

Checkout-style page collects card details, billing fields, and order summary information in one layout.

<div class="max-w-2xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  
  <div class="bg-layer rounded-xl shadow-xs p-4 sm:p-7">
    <div class="text-center mb-8">
      <h2 class="text-2xl md:text-3xl font-bold text-foreground">
        Payment
      </h2>
      <p class="text-sm text-muted-foreground-2">
        Manage your payment methods.
      </p>
    </div>

<form>
      
      <div class="py-6 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line">
        <label for="af-payment-billing-contact" class="inline-block text-sm font-medium text-foreground">
          Billing contact
        </label>

<div class="py-6 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line">
        <label for="af-payment-billing-address" class="inline-block text-sm font-medium text-foreground">
          Billing address
        </label>

<div class="mt-2 space-y-3">
          <input id="af-payment-billing-address" type="text" class="py-1.5 sm:py-2 px-3 block block w-full bg-layer border-layer-line shadow-2xs sm:text-sm rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Street Address">
          <input type="text" class="py-1.5 sm:py-2 px-3 block block w-full bg-layer border-layer-line shadow-2xs sm:text-sm rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Apt, Syuite, Building (Optional)">
          <div class="flex flex-col sm:flex-row gap-3">
            <input type="text" class="py-1.5 sm:py-2 px-3 block block w-full bg-layer border-layer-line shadow-2xs sm:text-sm rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Zip Code">
            <select class="py-1.5 sm:py-2 px-3 pe-9 block block w-full bg-layer border-layer-line shadow-2xs sm:text-sm rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
            <option selected>City</option>
              <option>City 1</option>
              <option>City 2</option>
              <option>City 3</option>
            </select>
            <select class="py-1.5 sm:py-2 px-3 pe-9 block block w-full bg-layer border-layer-line shadow-2xs sm:text-sm rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
            <option selected>State</option>
              <option>State 1</option>
              <option>State 2</option>
              <option>State 3</option>
            </select>
          </div>
        </div>
      </div>

<div class="py-6 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line">
        <label for="af-payment-payment-method" class="inline-block text-sm font-medium text-foreground">
          Payment method
        </label>

<div class="mt-5 flex justify-end gap-x-2">
      <button type="button" class="py-1.5 sm:py-2 px-3 inline-flex 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 focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
        Cancel
      </button>
      <button type="button" class="py-1.5 sm:py-2 px-3 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">
        Save changes
      </button>
    </div>
  </div>
  
</div>

Open related payment template

Application Submission Form Free

Full-page application form combines role details, text fields, uploads, and consent checkboxes.

<div class="max-w-4xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  
  <div class="bg-layer rounded-xl shadow-xs p-4 sm:p-7">
    <form>
      
      <div class="grid sm:grid-cols-12 gap-2 sm:gap-4 py-8 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line">
        <div class="sm:col-span-12">
          <h2 class="text-lg font-semibold text-foreground">
            Submit your application
          </h2>
        </div>

<div class="sm:col-span-3">
          <label for="af-submit-application-email" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
            Email
          </label>
        </div>

<div class="sm:col-span-3">
          <div class="inline-block">
            <label for="af-submit-application-phone" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
              Phone
            </label>
          </div>
        </div>

<div class="sm:col-span-3">
          <div class="inline-block">
            <label for="af-submit-application-current-company" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
              Current Company
            </label>
          </div>
        </div>

<div class="grid sm:grid-cols-12 gap-2 sm:gap-4 py-8 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line">
        <div class="sm:col-span-12">
          <h2 class="text-lg font-semibold text-foreground">
            Profile
          </h2>
        </div>

<div class="sm:col-span-3">
          <label for="af-submit-application-resume-cv" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
            Resume/CV
          </label>
        </div>

<div class="sm:col-span-9">
          <label for="af-submit-application-resume-cv" class="sr-only">Choose file</label>
          <input type="file" name="af-submit-application-resume-cv" id="af-submit-application-resume-cv" class="block w-full bg-layer border border-layer-line text-layer-foreground shadow-sm rounded-lg sm:text-sm focus:z-10 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none
            file:bg-surface file:border-0
            file:bg-surface file:me-4
            file:py-2 file:px-4">
        </div>

<div class="sm:col-span-3">
          <div class="inline-block">
            <label for="af-submit-application-bio" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
              Personal summary
            </label>
          </div>
        </div>

<div class="grid sm:grid-cols-12 gap-2 sm:gap-4 py-8 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line">
        <div class="sm:col-span-12">
          <h2 class="text-lg font-semibold text-foreground">
            Links
          </h2>
        </div>

<div class="sm:col-span-3">
          <label for="af-submit-application-linkedin-url" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
            LinkedIn URL
          </label>
        </div>

<div class="sm:col-span-3">
          <label for="af-submit-application-twitter-url" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
            Twitter URL
          </label>
        </div>

<div class="sm:col-span-3">
          <label for="af-submit-application-github-url" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
            Github URL
          </label>
        </div>

<div class="sm:col-span-3">
          <label for="af-submit-application-portfolio-url" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
            Portfolio URL
          </label>
        </div>

<div class="sm:col-span-3">
          <label for="af-submit-application-other-website" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
            Other website
          </label>
        </div>

<div class="grid sm:grid-cols-12 gap-2 sm:gap-4 py-8 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line">
        <div class="sm:col-span-12">
          <h2 class="text-lg font-semibold text-foreground">
            Before sending your application, please let us know...
          </h2>
        </div>

<div class="sm:col-span-3">
          <label for="af-submit-application-desired-salary" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
            Desired salary
          </label>
        </div>

<div class="sm:col-span-3">
          <label for="af-submit-application-available-start-date" class="inline-block text-sm font-medium text-muted-foreground-1 mt-2.5">
            Available start date
          </label>
        </div>

<div class="py-8 first:pt-0 last:pb-0 border-t first:border-transparent border-layer-line">
        <h2 class="text-lg font-semibold text-foreground">
          Submit application
        </h2>
        <p class="mt-3 text-sm text-muted-foreground-2">
          In order to contact you with future jobs that you may be interested in, we need to store your personal data.
        </p>
        <p class="mt-2 text-sm text-muted-foreground-2">
          If you are happy for us to do so please click the checkbox below.
        </p>

<div class="mt-5 flex items-center">
          <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="af-submit-application-privacy-check">
          <label for="af-submit-application-privacy-check" class="text-sm text-muted-foreground-1 ms-2">Allow us to process your personal information.</label>
        </div>
      </div>

<button type="button" 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">
        Submit application
      </button>
    </form>
  </div>
  
</div>