Tailwind CSS Onboarding Pages Blocks

Onboarding Pages

Step-by-step onboarding pages for role selection, contact sync, plan choice, and first project setup.

Onboarding Page with Role Selection Pro

Split onboarding page pairs a branded sidebar with selectable role chips, a primary continue action, and skip control.

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

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

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

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

<div class="grow px-5">
        <div class="h-full min-h-screen sm:w-md flex flex-col justify-center mx-auto space-y-5">
          
          <div>
            <h1 class="text-xl sm:text-2xl font-semibold text-foreground">
              What is your role?
            </h1>
            <p class="mt-1 text-sm text-muted-foreground-1">
              Help us personalize your experience. This will take less than a minute.
            </p>
          </div>

<form>
            <div class="flex flex-wrap gap-2 mb-5">
              <label for="hs-pro-donpf1" class="relative py-3 px-4 flex cursor-pointer text-sm focus:outline-hidden">
                <input type="radio" id="hs-pro-donpf1" name="hs-pro-donpf" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-xl cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary-50 checked:text-transparent checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none disabled:opacity-50 disabled:pointer-events-none dark:checked:after:bg-primary-500/20">
                <span class="peer-checked:text-primary-checked text-foreground">
                  Design
                </span>
              </label>
              <label for="hs-pro-donpf3" class="relative py-3 px-4 flex cursor-pointer text-sm focus:outline-hidden">
                <input type="radio" id="hs-pro-donpf3" name="hs-pro-donpf" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-xl cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary-50 checked:text-transparent checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none disabled:opacity-50 disabled:pointer-events-none dark:checked:after:bg-primary-500/20">
                <span class="peer-checked:text-primary-checked text-foreground">
                  Product Management
                </span>
              </label>
              <label for="hs-pro-donpf5" class="relative py-3 px-4 flex cursor-pointer text-sm focus:outline-hidden">
                <input type="radio" id="hs-pro-donpf5" name="hs-pro-donpf" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-xl cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary-50 checked:text-transparent checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none disabled:opacity-50 disabled:pointer-events-none dark:checked:after:bg-primary-500/20">
                <span class="peer-checked:text-primary-checked text-foreground">
                  Sales
                </span>
              </label>
              <label for="hs-pro-donpf2" class="relative py-3 px-4 flex cursor-pointer text-sm focus:outline-hidden">
                <input type="radio" id="hs-pro-donpf2" name="hs-pro-donpf" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-xl cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary-50 checked:text-transparent checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none disabled:opacity-50 disabled:pointer-events-none dark:checked:after:bg-primary-500/20">
                <span class="peer-checked:text-primary-checked text-foreground">
                  User Research
                </span>
              </label>
              <label for="hs-pro-donpf7" class="relative py-3 px-4 flex cursor-pointer text-sm focus:outline-hidden">
                <input type="radio" id="hs-pro-donpf7" name="hs-pro-donpf" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-xl cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary-50 checked:text-transparent checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none disabled:opacity-50 disabled:pointer-events-none dark:checked:after:bg-primary-500/20">
                <span class="peer-checked:text-primary-checked text-foreground">
                  Customer Experience
                </span>
              </label>
              <label for="hs-pro-donpf6" class="relative py-3 px-4 flex cursor-pointer text-sm focus:outline-hidden">
                <input type="radio" id="hs-pro-donpf6" name="hs-pro-donpf" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-xl cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary-50 checked:text-transparent checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none disabled:opacity-50 disabled:pointer-events-none dark:checked:after:bg-primary-500/20">
                <span class="peer-checked:text-primary-checked text-foreground">
                  Data Science
                </span>
              </label>
              <label for="hs-pro-donpf4" class="relative py-3 px-4 flex cursor-pointer text-sm focus:outline-hidden">
                <input type="radio" id="hs-pro-donpf4" name="hs-pro-donpf" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-xl cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary-50 checked:text-transparent checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none disabled:opacity-50 disabled:pointer-events-none dark:checked:after:bg-primary-500/20">
                <span class="peer-checked:text-primary-checked text-foreground">
                  Engineering
                </span>
              </label>
              <label for="hs-pro-donpf8" class="relative py-3 px-4 flex cursor-pointer text-sm focus:outline-hidden">
                <input type="radio" id="hs-pro-donpf8" name="hs-pro-donpf" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-xl cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary-50 checked:text-transparent checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none disabled:opacity-50 disabled:pointer-events-none dark:checked:after:bg-primary-500/20">
                <span class="peer-checked:text-primary-checked text-foreground">
                  Other
                </span>
              </label>
            </div>

<button type="button" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
              Continue
            </button>
            <button type="button" class="absolute top-4 inset-e-4 inline-flex items-center gap-x-1 text-sm decoration-2 hover:underline font-medium rounded-lg border border-transparent text-muted-foreground-1 hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:underline focus:text-primary-focus">
              Skip step
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </form>
          
        </div>
      </div>
      
    </main>

Onboarding Page with Contact Sync Pro

Split onboarding page pairs a branded sidebar with connected app rows, toggle actions, a primary continue button, and skip control.

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

<div class="grow px-5">
        <div class="h-full min-h-screen sm:w-md flex flex-col justify-center mx-auto space-y-5">
          
          <div>
            <h1 class="text-xl sm:text-2xl font-semibold text-foreground">
              Sync your contacts
            </h1>
            <p class="mt-1 text-sm text-muted-foreground-1">
              By bringing your customers, you'll turn Preline into a CRM for your product team.
            </p>
          </div>

<form>
            
            <div class="w-full flex items-center gap-x-3 py-4 border-b border-line-2">
              <span class="inline-flex shrink-0 justify-center items-center size-10 border border-line-2 rounded-lg shadow-2xs">
                <svg class="shrink-0 size-6" width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_11766_122209asdasd21)">
                  <path d="M3.11931 28.4817H8.21019V16.1181L0.937439 10.6636V26.3C0.937439 27.5054 1.91381 28.4819 3.11931 28.4819V28.4817Z" fill="#4285F4"/>
                  <path d="M25.6647 28.4817H30.7556C31.961 28.4817 32.9374 27.5054 32.9374 26.2999V10.6636L25.6647 16.1181V28.4817Z" fill="#34A853"/>
                  <path d="M25.6647 6.66356V16.1181L32.9374 10.6636V7.7545C32.9374 5.05812 29.8593 3.51812 27.701 5.13631L25.6647 6.66356Z" fill="#FBBC04"/>
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.21021 16.1181V6.66356L16.9375 13.2091L25.6647 6.66356V16.1181L16.9375 22.6636L8.21021 16.1181Z" fill="#EA4335"/>
                  <path d="M0.937439 7.7545V10.6636L8.21019 16.1181V6.66356L6.17381 5.13631C4.01556 3.51813 0.937439 5.05813 0.937439 7.75438V7.7545Z" fill="#C5221F"/>
                  </g>
                  <defs>
                  <clipPath id="clip0_11766_122209asdasd21">
                  <rect width="32" height="32" fill="white" transform="translate(0.937439)"/>
                  </clipPath>
                  </defs>
                </svg>
              </span>
              <div class="grow">
                <span class="block text-sm font-semibold text-foreground">
                  Gmail
                </span>
              </div>

<label for="hs-pro-dupccn1" class="relative py-2 px-2.5 block text-center sm:text-start rounded-lg cursor-pointer text-sm font-medium focus:outline-hidden">
                <input type="checkbox" id="hs-pro-dupccn1" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-line-2 text-transparent rounded-lg cursor-pointer after:block after:size-full after:rounded-md checked:after:bg-surface-1 checked:text-transparent checked:bg-none focus:ring-0 focus:ring-offset-0 disabled:opacity-50 disabled:pointer-events-none" checked>
                <span class="relative z-10 peer-checked:hidden text-foreground">
                  Connect
                </span>
                <span class="relative z-10 justify-center items-center gap-x-2 hidden peer-checked:flex peer-checked:text-foreground">
                  <svg class="shrink-0 size-3.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  Connected
                </span>
              </label>
            </div>
            
            
            
            <div class="w-full flex items-center gap-x-3 py-4 border-b border-line-2">
              <span class="inline-flex shrink-0 justify-center items-center size-10 border border-line-2 rounded-lg shadow-2xs">
                <svg class="shrink-0 size-6" 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>
              </span>
              <div class="grow">
                <span class="block text-sm font-semibold text-foreground">
                  Guideline
                </span>
              </div>

<label for="hs-pro-dupccn4" class="relative py-2 px-2.5 block text-center sm:text-start rounded-lg cursor-pointer text-sm font-medium focus:outline-hidden">
                <input type="checkbox" id="hs-pro-dupccn4" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-line-2 text-transparent rounded-lg cursor-pointer after:block after:size-full after:rounded-md checked:after:bg-surface-1 checked:text-transparent checked:bg-none focus:ring-0 focus:ring-offset-0 disabled:opacity-50 disabled:pointer-events-none">
                <span class="relative z-10 peer-checked:hidden text-foreground">
                  Connect
                </span>
                <span class="relative z-10 justify-center items-center gap-x-2 hidden peer-checked:flex peer-checked:text-foreground">
                  <svg class="shrink-0 size-3.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  Connected
                </span>
              </label>
            </div>

<div class="w-full flex items-center gap-x-3 py-4 border-b border-line-2">
              <span class="inline-flex shrink-0 justify-center items-center size-10 border border-line-2 rounded-lg shadow-2xs">
                <svg class="shrink-0 size-6" 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>
              </span>
              <div class="grow">
                <span class="block text-sm font-semibold text-foreground">
                  Notion
                </span>
              </div>

<label for="hs-pro-dupccn2" class="relative py-2 px-2.5 block text-center sm:text-start rounded-lg cursor-pointer text-sm font-medium focus:outline-hidden">
                <input type="checkbox" id="hs-pro-dupccn2" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-line-2 text-transparent rounded-lg cursor-pointer after:block after:size-full after:rounded-md checked:after:bg-surface-1 checked:text-transparent checked:bg-none focus:ring-0 focus:ring-offset-0 disabled:opacity-50 disabled:pointer-events-none">
                <span class="relative z-10 peer-checked:hidden text-foreground">
                  Connect
                </span>
                <span class="relative z-10 justify-center items-center gap-x-2 hidden peer-checked:flex peer-checked:text-foreground">
                  <svg class="shrink-0 size-3.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  Connected
                </span>
              </label>
            </div>
            
            
            
            <div class="w-full flex items-center gap-x-3 py-4 border-b border-line-2">
              <span class="inline-flex shrink-0 justify-center items-center size-10 border border-line-2 rounded-lg shadow-2xs">
                <svg class="shrink-0 size-6" 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>
              </span>
              <div class="grow">
                <span class="block text-sm font-semibold text-foreground">
                  Slack
                </span>
              </div>

<label for="hs-pro-dupccn3" class="relative py-2 px-2.5 block text-center sm:text-start rounded-lg cursor-pointer text-sm font-medium focus:outline-hidden">
                <input type="checkbox" id="hs-pro-dupccn3" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-line-2 text-transparent rounded-lg cursor-pointer after:block after:size-full after:rounded-md checked:after:bg-surface-1 checked:text-transparent checked:bg-none focus:ring-0 focus:ring-offset-0 disabled:opacity-50 disabled:pointer-events-none" checked>
                <span class="relative z-10 peer-checked:hidden text-foreground">
                  Connect
                </span>
                <span class="relative z-10 justify-center items-center gap-x-2 hidden peer-checked:flex peer-checked:text-foreground">
                  <svg class="shrink-0 size-3.5 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  Connected
                </span>
              </label>
            </div>

<button type="button" class="mt-4 py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
              Continue
            </button>
            <button type="button" class="absolute top-4 inset-e-4 inline-flex items-center gap-x-1 text-sm decoration-2 hover:underline font-medium rounded-lg border border-transparent text-muted-foreground-1 hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:underline focus:text-primary-focus">
              Skip step
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </form>
          
        </div>
      </div>
      
    </main>

Onboarding Page with Plan Selection Pro

Split onboarding page pairs a branded sidebar with selectable plan cards, a primary continue action, and skip control.

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

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

<div class="grow px-5">
        <div class="h-full min-h-screen sm:w-120 flex flex-col justify-center mx-auto space-y-5">
          
          <div>
            <h1 class="text-xl sm:text-2xl font-semibold text-foreground">
              How are you planning to use Preline?
            </h1>
            <p class="mt-1 text-sm text-muted-foreground-1">
              We'll streamline your setup experience accordingly.
            </p>
          </div>

<form>
            <div class="grid grid-cols-2 gap-3">
              
              <label for="hs-pro-gpromf" class="relative py-3 px-4 flex border border-transparent rounded-xl cursor-pointer focus:outline-hidden">
                <input type="radio" id="hs-pro-gpromf" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-line-2 rounded-xl cursor-pointer appearance-none focus:ring-0 focus:ring-offset-0 checked:border-2 checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none checked:text-transparent disabled:opacity-50 disabled:pointer-events-none before:absolute before:top-3.5 before:inset-e-3.5 before:border before:border-line-2 before:size-5 before:rounded-full" value="Free" name="hs-pro-gpromn" checked>
                <span class="peer-checked:flex hidden absolute top-4 inset-e-4">
                  <span class="block size-5 flex justify-center items-center rounded-full bg-primary">
                    <svg class="shrink-0 size-3 text-primary-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                </span>
                <span class="w-full">
                  <svg class="w-8.5 h-7.5 mb-2 sm:mb-8" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/>
                  </svg>
                  <span class="block font-semibold text-foreground">
                    Free
                  </span>
                  <span class="block text-sm text-muted-foreground-1">
                    Forever free.
                  </span>
                </span>
              </label>

<label for="hs-pro-gproms" class="relative py-3 px-4 flex border border-transparent rounded-xl cursor-pointer focus:outline-hidden">
                <input type="radio" id="hs-pro-gproms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-line-2 rounded-xl cursor-pointer appearance-none focus:ring-0 focus:ring-offset-0 checked:border-2 checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none checked:text-transparent disabled:opacity-50 disabled:pointer-events-none before:absolute before:top-3.5 before:inset-e-3.5 before:border before:border-line-2 before:size-5 before:rounded-full" value="Startup" name="hs-pro-gpromn">
                <span class="peer-checked:flex hidden absolute top-4 inset-e-4">
                  <span class="block size-5 flex justify-center items-center rounded-full bg-primary">
                    <svg class="shrink-0 size-3 text-primary-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                </span>
                <span class="w-full">
                  <svg class="w-8.5 h-7.5 mb-2 sm:mb-8" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/>
                    <rect x="14" y="5" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-500 dark:fill-primary-700"/>
                  </svg>
                  <span class="block font-semibold text-foreground">
                    Startup
                  </span>
                  <span class="block text-sm text-muted-foreground-1">
                    All the basics for starting a new business.
                  </span>
                </span>
              </label>

<label for="hs-pro-gpromt" class="relative py-3 px-4 flex border border-transparent rounded-xl cursor-pointer focus:outline-hidden">
                <input type="radio" id="hs-pro-gpromt" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-line-2 rounded-xl cursor-pointer appearance-none focus:ring-0 focus:ring-offset-0 checked:border-2 checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none checked:text-transparent disabled:opacity-50 disabled:pointer-events-none before:absolute before:top-3.5 before:inset-e-3.5 before:border before:border-line-2 before:size-5 before:rounded-full" value="Team" name="hs-pro-gpromn">
                <span class="peer-checked:flex hidden absolute top-4 inset-e-4">
                  <span class="block size-5 flex justify-center items-center rounded-full bg-primary">
                    <svg class="shrink-0 size-3 text-primary-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                </span>
                <span class="w-full">
                  <svg class="w-8.5 h-7.5 mb-2 sm:mb-8" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="7" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-200 dark:fill-primary-500"/>
                    <rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/>
                    <rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-500 dark:fill-primary-700"/>
                  </svg>
                  <span class="block font-semibold text-foreground">
                    Team
                  </span>
                  <span class="block text-sm text-muted-foreground-1">
                    Everything you need for a growing business.
                  </span>
                </span>
              </label>

<label for="hs-pro-gprome" class="relative py-3 px-4 flex border border-transparent rounded-xl cursor-pointer focus:outline-hidden">
                <input type="radio" id="hs-pro-gprome" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-line-2 rounded-xl cursor-pointer appearance-none focus:ring-0 focus:ring-offset-0 checked:border-2 checked:border-primary-checked checked:hover:border-primary-checked checked:focus:border-primary-checked checked:bg-none checked:text-transparent disabled:opacity-50 disabled:pointer-events-none before:absolute before:top-3.5 before:inset-e-3.5 before:border before:border-line-2 before:size-5 before:rounded-full" value="Enterprise" name="hs-pro-gpromn">
                <span class="peer-checked:flex hidden absolute top-4 inset-e-4">
                  <span class="block size-5 flex justify-center items-center rounded-full bg-primary">
                    <svg class="shrink-0 size-3 text-primary-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  </span>
                </span>
                <span class="w-full">
                  <svg class="w-8.5 h-7.5 mb-2 sm:mb-8" width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="20" height="20" rx="10" fill="currentColor" class="fill-primary-200 dark:fill-primary-500"/>
                    <rect y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-300 dark:fill-primary-600"/>
                    <rect x="14" y="10" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-400 dark:fill-primary-700"/>
                    <rect x="14" width="20" height="20" rx="10" fill="currentColor" class="fill-primary-600 dark:fill-primary-800"/>
                  </svg>
                  <span class="block font-semibold text-foreground">
                    Enterprise
                  </span>
                  <span class="block text-sm text-muted-foreground-1">
                    Advanced features for scaling your business.
                  </span>
                </span>
              </label>
              
            </div>

<button type="button" class="mt-4 sm:mt-6 py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none">
              Continue
            </button>
            <button type="button" class="absolute top-4 inset-e-4 inline-flex items-center gap-x-1 text-sm decoration-2 hover:underline font-medium rounded-lg border border-transparent text-muted-foreground-1 hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:underline focus:text-primary-focus">
              Skip step
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
            </button>
          </form>
          
        </div>
      </div>
      
    </main>

Onboarding Page with Project Setup Form Pro

Split onboarding page pairs a branded sidebar with project name, subdomain, and country fields for first-project setup.

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

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

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

<div class="relative">
                  <input type="text" id="hs-pro-dalsd" class="py-2 sm:py-2.5 ps-3 pe-24 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="myproject">
                  <div class="absolute inset-y-0 inset-e-0 flex items-center pointer-events-none z-20 pe-4">
                    <span class="text-sm text-muted-foreground-1">.preline.co</span>
                  </div>
                </div>
              </div>

<div>
                <label class="block mb-2 text-sm font-medium text-foreground">
                  Country
                </label>

<div class="relative">
                  <select data-hs-select='{
                    "placeholder": "Select country",
                    "hasSearch": true,
                    "searchPlaceholder": "Search country",
                    "searchClasses": "py-2 px-3 block w-full text-sm bg-transparent border-layer-line rounded-lg text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus",
                    "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-2.5 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus",
                    "dropdownClasses": "max-h-72 p-1 pt-0 space-y-0.5 z-50 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                    "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                    "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-foreground\" data-title></div></div></div>",
                    "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
                  }' class="hidden">
                    <option value="">Choose</option>
                    <option value="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 d`Ivoire\" />"}'>
                      Côte d'Ivoire
                    </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>