Modals

<div class="min-h-[36rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-modal-upgrade-to-pro">
      Open modal
    </button>
  </div>

  <!-- Modal -->
  <div id="hs-modal-upgrade-to-pro" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="bg-white border border-gray-200 rounded-xl shadow-sm ">
        <div class="p-4 sm:p-7">
          <div class="text-center">
            <h2 class="block text-xl sm:text-2xl font-semibold text-hs2-text ">Advanced features</h2>
            <p class="mt-2 text-sm text-hs2-text-light ">
              "Compare to" Price, Bulk Discount Pricing, Inventory Tracking
              <a class="text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">
                Sign up here
              </a>
            </p>
            <div class="mt-5">
              <a class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm " href="#">
                <svg class="w-4 h-auto" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
                </svg>
                Upgrade to get these features
              </a>
            </div>
          </div>

          <div class="mt-8 sm:mt-10 divide-y divide-gray-200 ">
            <!-- Icon -->
            <div class="flex gap-x-7 py-5 first:pt-0 last:pb-0">
              <svg class="flex-shrink-0 mt-1 w-8 h-8 text-hs2-text-light " xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M5.5 9.511c.076.954.83 1.697 2.182 1.785V12h.6v-.709c1.4-.098 2.218-.846 2.218-1.932 0-.987-.626-1.496-1.745-1.76l-.473-.112V5.57c.6.068.982.396 1.074.85h1.052c-.076-.919-.864-1.638-2.126-1.716V4h-.6v.719c-1.195.117-2.01.836-2.01 1.853 0 .9.606 1.472 1.613 1.707l.397.098v2.034c-.615-.093-1.022-.43-1.114-.9H5.5zm2.177-2.166c-.59-.137-.91-.416-.91-.836 0-.47.345-.822.915-.925v1.76h-.005zm.692 1.193c.717.166 1.048.435 1.048.91 0 .542-.412.914-1.135.982V8.518l.087.02z" />
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                <path d="M8 13.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0 .5A6 6 0 1 0 8 2a6 6 0 0 0 0 12z" />
              </svg>

              <div>
                <h3 class="font-semibold text-hs2-text ">
                  "Compare to" price
                </h3>
                <p class="text-sm text-hs2-text-light">
                  Use this feature when you want to put a product on sale or show savings off suggested retail pricing.
                </p>
              </div>
            </div>
            <!-- End Icon -->

            <!-- Icon -->
            <div class="flex gap-x-7 py-5 first:pt-0 last:pb-0">
              <svg class="flex-shrink-0 mt-1 w-8 h-8 text-hs2-text-light " xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M3.5 3.5c-.614-.884-.074-1.962.858-2.5L8 7.226 11.642 1c.932.538 1.472 1.616.858 2.5L8.81 8.61l1.556 2.661a2.5 2.5 0 1 1-.794.637L8 9.73l-1.572 2.177a2.5 2.5 0 1 1-.794-.637L7.19 8.61 3.5 3.5zm2.5 10a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zm7 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z" />
              </svg>

              <div>
                <h3 class="font-semibold text-hs2-text ">
                  Bulk discount pricing
                </h3>
                <p class="text-sm text-hs2-text-light">
                  Encourage higher purchase quantities with volume discounts.
                </p>
              </div>
            </div>
            <!-- End Icon -->

            <!-- Icon -->
            <div class="flex gap-x-7 py-5 first:pt-0 last:pb-0">
              <svg class="flex-shrink-0 mt-1 w-8 h-8 text-hs2-text-light " xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
              </svg>

              <div>
                <h3 class="font-semibold text-hs2-text ">
                  Inventory tracking
                </h3>
                <p class="text-sm text-hs2-text-light">
                  Automatically keep track of product availability and receive notifications when inventory levels get low.
                </p>
              </div>
            </div>
            <!-- End Icon -->
          </div>
        </div>

        <!-- Footer -->
        <div class="flex justify-end items-center gap-x-2 p-4 sm:px-7 border-t ">
          <button type="button" class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-hs2-danger font-medium bg-white text-hs2-danger shadow-sm align-middle hover:bg-hs2-danger hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-danger transition-all text-sm " data-hs-overlay="#hs-notifications">
            Cancel
          </button>
          <a class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm " href="#">
            Upgrade now
          </a>
        </div>
        <!-- End Footer -->
      </div>
    </div>
  </div>
  <!-- End Modal -->
</div>

<div class="min-h-[45rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-bg-gray-on-hover-cards">
      Open modal
    </button>
  </div>

  <div id="hs-bg-gray-on-hover-cards" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all lg:max-w-4xl lg:w-full m-3 lg:mx-auto">
      <div class="flex flex-col bg-white border shadow-sm rounded-xl ">
        <div class="flex justify-between items-center py-3 px-4 border-b ">
          <h3 class="font-bold text-hs2-text ">
            Plugins
          </h3>
          <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-white bg-hs2-danger hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 focus:ring-offset-white transition-all text-sm " data-hs-overlay="#hs-bg-gray-on-hover-cards">
            <span class="sr-only">Close</span>
            <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
            </svg>
          </button>
        </div>

        <div class="p-4 overflow-y-auto">
          <div class="sm:divide-y divide-gray-200 ">
            <div class="py-3 sm:py-6">
              <h4 class="mb-2 text-xs font-semibold uppercase text-hs2-text-light ">
                Base
              </h4>

              <!-- Grid -->
              <div class="grid gap-2 sm:grid-cols-2 md:grid-cols-3">
                <!-- Card -->
                <a class="bg-white p-4 transition group duration-300 rounded-md hover:bg-gray-100 " href="../docs/frameworks-vuejs.html">
                  <div class="flex">
                    <div class="mt-1.5 flex justify-center flex-shrink-0 rounded-l-xl">
                      <svg class="w-5 h-5 text-hs2-text " width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M3 4.5h10a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H3zM1 2a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 2zm0 12a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 14z"></path>
                      </svg>
                    </div>

                    <div class="grow ml-6">
                      <h3 class="text-sm font-semibold text-hs2-link group-hover:text-hs2-hover-state ">
                        Accordion
                      </h3>
                      <p class="mt-1 text-sm text-hs2-text-light ">
                        A framework for building web user interfaces.
                      </p>
                    </div>
                  </div>
                </a>
                <!-- End Card -->

                <!-- Card -->
                <a class="bg-white p-4 transition group duration-300 rounded-md hover:bg-gray-100 " href="../docs/frameworks-vuejs.html">
                  <div class="flex">
                    <div class="mt-1.5 flex justify-center flex-shrink-0 rounded-l-xl">
                      <svg class="w-5 h-5 text-hs2-text " width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M12.4077 1H12.9077C14.0123 1 14.9077 1.89543 14.9077 3V13C14.9077 14.1046 14.0123 15 12.9077 15H2.90771C1.80315 15 0.907715 14.1046 0.907715 13V3C0.907715 1.89543 1.80314 1 2.90771 1H5.10034C5.83943 1 6.43858 1.59915 6.43858 2.33824C6.43858 3.07732 7.03773 3.67647 7.77681 3.67647H14.4077M8.5 1H8.90771C10.0123 1 10.9077 1.89543 10.9077 3V3.5M3.90771 8H9.90771M3.90771 11.5H11.9077" stroke="currentColor" stroke-linecap="round"></path>
                      </svg>
                    </div>

                    <div class="grow ml-6">
                      <h3 class="text-sm font-semibold text-hs2-link group-hover:text-hs2-hover-state ">
                        Tabs
                      </h3>
                      <p class="mt-1 text-sm text-hs2-text-light ">
                        A framework for building web user interfaces.
                      </p>
                    </div>
                  </div>
                </a>
                <!-- End Card -->

                <!-- Card -->
                <a class="bg-white p-4 transition group duration-300 rounded-md hover:bg-gray-100 " href="../docs/frameworks-vuejs.html">
                  <div class="flex">
                    <div class="mt-1.5 flex justify-center flex-shrink-0 rounded-l-xl">
                      <svg class="w-5 h-5 text-hs2-text " width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z" />
                      </svg>
                    </div>

                    <div class="grow ml-6">
                      <h3 class="text-sm font-semibold text-hs2-link group-hover:text-hs2-hover-state ">
                        Scrollspy
                      </h3>
                      <p class="mt-1 text-sm text-hs2-text-light ">
                        A framework for building web user interfaces.
                      </p>
                    </div>
                  </div>
                </a>
                <!-- End Card -->

                <!-- Card -->
                <a class="bg-white p-4 transition group duration-300 rounded-md hover:bg-gray-100 " href="../docs/frameworks-vuejs.html">
                  <div class="flex">
                    <div class="mt-1.5 flex justify-center flex-shrink-0 rounded-l-xl">
                      <svg class="w-5 h-5 text-hs2-text " width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M8 6.00002V13M3 8.00002H6M10 8.00002H13M3 11H6M10 11H13M1 5.50002V13.5C1 14.6046 1.89543 15.5 3 15.5H13C14.1046 15.5 15 14.6046 15 13.5V5.50002C15 4.39545 14.1046 3.50002 13 3.50002H11.2024C10.6481 3.50002 10.1186 3.26992 9.74033 2.86465L8.73105 1.78329C8.33572 1.35971 7.66428 1.35971 7.26894 1.78329L6.25967 2.86465C5.88142 3.26992 5.35193 3.50002 4.79756 3.50002H3C1.89543 3.50002 1 4.39545 1 5.50002Z" stroke="currentColor" stroke-linecap="round"></path>
                      </svg>
                    </div>

                    <div class="grow ml-6">
                      <h3 class="text-sm font-semibold text-hs2-link group-hover:text-hs2-hover-state ">
                        Mega Menu <span class="ml-1 inline bg-blue-50 border border-blue-300 text-hs2-link text-[.6125rem] leading-4 uppercase rounded-full py-0.5 px-2 ">Hot</span>
                      </h3>
                      <p class="mt-1 text-sm text-hs2-text-light ">
                        A framework for building web user interfaces.
                      </p>
                    </div>
                  </div>
                </a>
                <!-- End Card -->

                <!-- Card -->
                <a class="bg-white p-4 transition group duration-300 rounded-md hover:bg-gray-100 " href="../docs/frameworks-vuejs.html">
                  <div class="flex">
                    <div class="mt-1.5 flex justify-center flex-shrink-0 rounded-l-xl">
                      <svg class="w-5 h-5 text-hs2-text " width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v2A1.5 1.5 0 0 1 14.5 5h-13A1.5 1.5 0 0 1 0 3.5v-2zM1.5 1a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-13z"></path>
                        <path d="M2 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm10.823.323-.396-.396A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"></path>
                      </svg>
                    </div>

                    <div class="grow ml-6">
                      <h3 class="text-sm font-semibold text-hs2-link group-hover:text-hs2-hover-state ">
                        Dropdown
                      </h3>
                      <p class="mt-1 text-sm text-hs2-text-light ">
                        A framework for building web user interfaces.
                      </p>
                    </div>
                  </div>
                </a>
                <!-- End Card -->
              </div>
              <!-- End Grid -->
            </div>

            <div class="py-3 sm:py-6">
              <h4 class="mb-2 text-xs font-semibold uppercase text-hs2-text-light ">
                Advanced
              </h4>

              <!-- Grid -->
              <div class="grid gap-2 sm:grid-cols-2 md:grid-cols-3">
                <!-- Card -->
                <a class="bg-white p-4 transition group duration-300 rounded-md hover:bg-gray-100 " href="../docs/frameworks-vuejs.html">
                  <div class="flex">
                    <div class="mt-1.5 flex justify-center flex-shrink-0 rounded-l-xl">
                      <svg class="w-5 h-5 text-hs2-text " width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M4.5 6a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1ZM6 6a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1Zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"></path>
                        <path d="M12 1a2 2 0 0 1 2 2 2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2 2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10ZM2 12V5a2 2 0 0 1 2-2h9a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1Zm1-4v5a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8H3Zm12-1V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v2h12Z"></path>
                      </svg>
                    </div>

                    <div class="grow ml-6">
                      <h3 class="text-sm font-semibold text-hs2-link group-hover:text-hs2-hover-state ">
                        Modal
                      </h3>
                      <p class="mt-1 text-sm text-hs2-text-light ">
                        A framework for building web user interfaces.
                      </p>
                    </div>
                  </div>
                </a>
                <!-- End Card -->

                <!-- Card -->
                <a class="bg-white p-4 transition group duration-300 rounded-md hover:bg-gray-100 " href="../docs/frameworks-vuejs.html">
                  <div class="flex">
                    <div class="mt-1.5 flex justify-center flex-shrink-0 rounded-l-xl">
                      <svg class="w-5 h-5 text-hs2-text " width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z"></path>
                        <path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z"></path>
                      </svg>
                    </div>

                    <div class="grow ml-6">
                      <h3 class="text-sm font-semibold text-hs2-link group-hover:text-hs2-hover-state ">
                        Offcanvas
                      </h3>
                      <p class="mt-1 text-sm text-hs2-text-light ">
                        A framework for building web user interfaces.
                      </p>
                    </div>
                  </div>
                </a>
                <!-- End Card -->

                <!-- Card -->
                <a class="bg-white p-4 transition group duration-300 rounded-md hover:bg-gray-100 " href="../docs/frameworks-vuejs.html">
                  <div class="flex">
                    <div class="mt-1.5 flex justify-center flex-shrink-0 rounded-l-xl">
                      <svg class="w-5 h-5 text-hs2-text " width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M2.5 4a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm2-.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm1 .5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"></path>
                        <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v2H1V3a1 1 0 0 1 1-1h12zM1 13V6h4v8H2a1 1 0 0 1-1-1zm5 1V6h9v7a1 1 0 0 1-1 1H6z"></path>
                      </svg>
                    </div>

                    <div class="grow ml-6">
                      <h3 class="text-sm font-semibold text-hs2-link group-hover:text-hs2-hover-state ">
                        Sidebar <span class="ml-1 inline bg-blue-50 border border-blue-300 text-hs2-link text-[.6125rem] leading-4 uppercase rounded-full py-0.5 px-2 ">New</span>
                      </h3>
                      <p class="mt-1 text-sm text-hs2-text-light ">
                        A framework for building web user interfaces.
                      </p>
                    </div>
                  </div>
                </a>
                <!-- End Card -->

                <!-- Card -->
                <a class="bg-white p-4 transition group duration-300 rounded-md hover:bg-gray-100 " href="../docs/frameworks-vuejs.html">
                  <div class="flex">
                    <div class="mt-1.5 flex justify-center flex-shrink-0 rounded-l-xl">
                      <svg class="w-5 h-5 text-hs2-text " width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M7.646.146a.5.5 0 0 1 .708 0L10.207 2H14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h3.793L7.646.146zM1 7v3h14V7H1zm14-1V4a1 1 0 0 0-1-1h-3.793a1 1 0 0 1-.707-.293L8 1.207l-1.5 1.5A1 1 0 0 1 5.793 3H2a1 1 0 0 0-1 1v2h14zm0 5H1v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2zM2 4.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"></path>
                      </svg>
                    </div>

                    <div class="grow ml-6">
                      <h3 class="text-sm font-semibold text-hs2-link group-hover:text-hs2-hover-state ">
                        Popover
                      </h3>
                      <p class="mt-1 text-sm text-hs2-text-light ">
                        A framework for building web user interfaces.
                      </p>
                    </div>
                  </div>
                </a>
                <!-- End Card -->
              </div>
              <!-- End Grid -->

              <p class="mt-4 text-xs text-gray-500">
                Completely unstyled, fully accessible UI <a class="inline-flex items-center gap-x-1.5 text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">plugins</a> for popular features that for one reason or another don't belong in core.
              </p>
            </div>
          </div>
        </div>

        <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t ">
          <a class="inline-flex items-center gap-x-1.5 text-sm text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">
            Installation Guide
            <svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[25rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-cookies">
      Open modal
    </button>
  </div>

  <div id="hs-cookies" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="relative flex flex-col bg-white shadow-lg rounded-xl ">
        <div class="absolute top-2 right-2">
          <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-white bg-hs2-danger hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 focus:ring-offset-white transition-all text-sm " data-hs-overlay="#hs-cookies">
            <span class="sr-only">Close</span>
            <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
            </svg>
          </button>
        </div>

        <div class="p-4 sm:p-14 text-center overflow-y-auto">
          <svg class="mb-4 w-20 h-auto mx-auto" width="72" height="63" viewBox="0 0 72 63" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.5174 56.1528C16.2903 57.6825 16.929 61.4559 14.8118 60.9459C13.5013 60.5381 11.4445 57.6213 12.493 56.1528C12.661 55.8468 13.2189 55.2757 14.106 55.4389" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <path d="M15.5173 49.6263L14.0262 48.5579C13.5346 48.2056 12.8477 48.3707 12.658 48.945C12.3456 49.8907 12.1258 51.1463 12.462 52.2324C12.5336 52.4636 12.7127 52.6466 12.9449 52.7146C13.8342 52.9751 15.2568 52.9048 15.8197 51.054" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <mask id="path-3-inside-1_4542_101166" fill="white">
              <ellipse rx="1.09811" ry="0.738034" transform="matrix(0.921654 0.388014 -0.38048 0.924789 14.2069 43.4055)" />
            </mask>
            <path d="M13.3756 43.0555C13.6288 42.4402 14.1378 42.259 14.3273 42.2214C14.5316 42.1809 14.6503 42.223 14.687 42.2384L13.1651 45.9376C13.7607 46.1884 14.4484 46.2907 15.1206 46.1574C15.7781 46.0269 16.654 45.5999 17.0622 44.6076L13.3756 43.0555ZM14.687 42.2384C14.7237 42.2539 14.8369 42.3094 14.9524 42.4846C15.0596 42.6471 15.2913 43.1401 15.0381 43.7554L11.3515 42.2034C10.9432 43.1957 11.261 44.1253 11.6329 44.689C12.0131 45.2654 12.5694 45.6868 13.1651 45.9376L14.687 42.2384ZM15.0381 43.7554C14.7849 44.3708 14.2759 44.552 14.0864 44.5895C13.8821 44.6301 13.7634 44.588 13.7267 44.5725L15.2486 40.8734C14.653 40.6226 13.9653 40.5203 13.2931 40.6536C12.6357 40.784 11.7597 41.2111 11.3515 42.2034L15.0381 43.7554ZM13.7267 44.5725C13.69 44.5571 13.5768 44.5015 13.4613 44.3264C13.3541 44.1638 13.1225 43.6709 13.3756 43.0555L17.0622 44.6076C17.4705 43.6153 17.1527 42.6857 16.7809 42.1219C16.4007 41.5455 15.8443 41.1241 15.2486 40.8734L13.7267 44.5725Z" class="fill-gray-800 " fill="currentColor" mask="url(#path-3-inside-1_4542_101166)" />
            <mask id="path-5-inside-2_4542_101166" fill="white">
              <ellipse rx="1.00988" ry="1.0181" transform="matrix(0.921654 0.388014 -0.38048 0.924789 21.3702 57.2201)" />
            </mask>
            <path d="M20.4576 56.8359C20.6581 56.3486 21.2257 56.094 21.7438 56.312L20.2219 60.0112C21.768 60.6621 23.5159 59.9153 24.1442 58.388L20.4576 56.8359ZM21.7438 56.312C22.2618 56.5301 22.4832 57.1169 22.2827 57.6043L18.5961 56.0522C17.9677 57.5795 18.6757 59.3603 20.2219 60.0112L21.7438 56.312ZM22.2827 57.6043C22.0822 58.0916 21.5146 58.3462 20.9966 58.1281L22.5185 54.429C20.9724 53.7781 19.2245 54.5249 18.5961 56.0522L22.2827 57.6043ZM20.9966 58.1281C20.4785 57.9101 20.2571 57.3233 20.4576 56.8359L24.1442 58.388C24.7726 56.8607 24.0646 55.0799 22.5185 54.429L20.9966 58.1281Z" class="fill-gray-800 " fill="currentColor" mask="url(#path-5-inside-2_4542_101166)" />
            <mask id="path-7-inside-3_4542_101166" fill="white">
              <ellipse rx="1.00988" ry="1.0181" transform="matrix(0.921654 0.388014 -0.38048 0.924789 6.75397 38.8236)" />
            </mask>
            <path d="M5.84142 38.4394C6.04192 37.9521 6.60952 37.6975 7.12756 37.9156L5.60564 41.6147C7.15177 42.2656 8.89966 41.5188 9.52804 39.9915L5.84142 38.4394ZM7.12756 37.9156C7.6456 38.1337 7.86701 38.7205 7.66651 39.2078L3.9799 37.6557C3.35152 39.1831 4.05951 40.9638 5.60564 41.6147L7.12756 37.9156ZM7.66651 39.2078C7.46601 39.6951 6.89842 39.9498 6.38037 39.7317L7.90229 36.0325C6.35616 35.3816 4.60827 36.1284 3.9799 37.6557L7.66651 39.2078ZM6.38037 39.7317C5.86233 39.5136 5.64092 38.9268 5.84142 38.4394L9.52804 39.9915C10.1564 38.4642 9.44843 36.6834 7.90229 36.0325L6.38037 39.7317Z" class="fill-gray-800 " fill="currentColor" mask="url(#path-7-inside-3_4542_101166)" />
            <path d="M31.6479 50.2383C31.5807 51.2241 32.1721 53.053 35.0756 52.4819" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <path d="M50.9903 34.6769C50.1699 34.1428 48.3973 33.5907 47.8709 35.6552" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <path d="M40.9087 17.4562C40.0882 16.9221 38.3156 16.37 37.7892 18.4345" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <path d="M27.8502 29.3345C27.1279 29.998 26.1419 31.587 27.977 32.6357" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <path d="M62.1917 19.585C62.4894 18.6451 62.5577 16.7703 60.4502 16.7902" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <ellipse cx="51.2061" cy="22.3973" rx="3.02446" ry="3.05945" class="fill-gray-800 " fill="currentColor" />
            <path d="M67.7398 29.6361C68.8249 31.2826 67.6381 32.6215 66.8281 33.1457C66.7645 33.1869 66.695 33.2184 66.6214 33.2363C65.0504 33.618 63.6063 31.5388 63.6063 30.0441C63.6064 28.8034 66.3283 27.4945 67.7398 29.6361Z" class="fill-gray-800 " fill="currentColor" />
            <path d="M58.868 38.6126C57.9809 36.4914 54.6002 37.7288 53.0207 38.6126C51.7101 39.2284 52.0126 41.4681 53.6256 43.3038C54.9161 44.7723 56.5157 44.1196 57.1542 43.6097C58.0951 42.8279 59.7552 40.7339 58.868 38.6126Z" class="fill-gray-800 " fill="currentColor" />
            <path d="M5.85665 41.8048C5.21042 40.2694 2.74791 41.1651 1.59743 41.8048C0.642774 42.2505 0.863078 43.8717 2.03804 45.2004C2.978 46.2634 4.14317 45.7909 4.60826 45.4219C5.29365 44.8559 6.50288 43.3402 5.85665 41.8048Z" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <path d="M45.4596 49.2172C40.9431 47.667 40.2844 51.6987 40.5196 53.9083C40.8221 55.3361 42.4351 55.54 43.4433 55.2341C45.5677 54.5894 51.1052 51.1548 45.4596 49.2172Z" class="fill-gray-800 " fill="currentColor" />
            <ellipse rx="2.96295" ry="3.45694" transform="matrix(0.855131 0.518411 -0.509711 0.860345 30.4996 41.3871)" class="fill-gray-800 " fill="currentColor" />
            <path d="M38.5032 29.1282C39.471 27.8228 37.8983 26.0687 36.991 25.3549C36.0836 24.6411 34.8335 24.8654 33.8657 26.1707C32.7567 27.6664 37.2934 30.7599 38.5032 29.1282Z" class="fill-gray-800 " fill="currentColor" />
            <path d="M19.2476 18.9295C16.4247 18.2768 15.7862 19.8813 15.8198 20.7652C16.0215 23.8246 20.5582 24.4365 21.6672 23.6207C22.4364 23.0548 22.7761 19.7453 19.2476 18.9295Z" class="fill-gray-800 " fill="currentColor" />
            <path d="M36.6888 6.79381C35.6403 4.67259 33.2947 5.02613 32.2529 5.46805C28.7042 6.61025 29.3292 8.52749 30.1358 9.13938C31.3456 10.1252 34.2289 12.0153 36.0839 11.6889C38.4027 11.281 37.9994 9.44533 36.6888 6.79381Z" class="fill-gray-800 " fill="currentColor" />
            <path d="M56.9526 54.9284C57.7592 53.5006 60.2795 51.0735 65.1187 49.9313C66.0596 49.7953 67.9818 48.5647 68.1431 44.7302C68.3448 39.9371 73.5872 32.9003 69.3529 28.1072C67.5382 26.053 68.4456 23.2121 67.5382 17.7051" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <path d="M66.7316 16.176C65.1521 14.2383 60.6625 9.8939 55.3394 8.01743C48.703 5.67797 55.8063 4.55591 44.1399 4.75246C44.0816 4.75344 44.0194 4.76029 43.9617 4.76836C43.019 4.90008 40.5102 4.51266 37.2614 1.95295C37.2161 1.91728 37.1681 1.88406 37.1153 1.86091C36.6 1.63502 35.1744 1.43154 32.9584 2.2045C30.6195 3.02036 24.0531 5.46791 21.0622 6.58971C20.4237 6.92965 19.0056 8.05825 18.441 9.85312C17.7353 12.0967 5.93991 23.5187 9.56927 28.9237" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
            <path d="M10.4768 30.1484C11.9084 30.3333 14.621 31.3895 15.0562 34.1372C15.1369 34.6464 15.5068 35.0847 16.0079 35.2063C18.8253 35.8904 22.6446 38.4014 20.8122 44.4603C20.7218 44.7592 20.7652 45.0847 20.9158 45.3583C21.7327 46.8422 22.367 49.4462 20.6725 51.7386C20.1262 52.4776 20.4167 53.842 21.2912 54.1243C23.3727 54.7962 25.8398 55.985 27.2662 57.833C27.5533 58.2049 28.0338 58.3932 28.4956 58.3062C30.4142 57.9446 33.9492 57.9776 37.2937 60.233C42.1328 63.4964 42.3345 60.0291 48.6858 60.7429C53.7669 61.314 55.7765 58.3294 56.1462 56.7656" class="stroke-gray-800 " stroke="currentColor" stroke-width="2" stroke-linecap="round" />
          </svg>

          <h3 class="mb-2 text-2xl font-bold text-hs2-text ">
            Cookies!
          </h3>
          <p class="text-hs2-text-light">
            This website uses cookies to make your experience better.
          </p>
        </div>

        <div class="flex items-center">
          <button type="button" class="p-4 w-full inline-flex justify-center items-center gap-2 rounded-bl-xl bg-hs2-secondary border border-transparent font-semibold text-white hover:bg-hs2-secondary-hover focus:outline-none focus:ring-2 ring-offset-white focus:ring-hs2-secondary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-cookies">
            Privacy Policy
          </button>
          <button type="button" class="p-4 w-full inline-flex justify-center items-center gap-2 rounded-br-xl border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-cookies">
            Got it
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[45rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-notifications">
      Open modal
    </button>
  </div>

  <div id="hs-notifications" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="relative flex flex-col bg-white border shadow-sm rounded-xl overflow-hidden ">
        <div class="absolute top-2 right-2">
          <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-white bg-hs2-danger hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 focus:ring-offset-white transition-all text-sm " data-hs-overlay="#hs-notifications">
            <span class="sr-only">Close</span>
            <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
            </svg>
          </button>
        </div>

        <div class="p-4 sm:p-10 overflow-y-auto">
          <div class="mb-6 text-center">
            <h3 class="mb-2 text-xl font-bold text-hs2-text ">
              Notifications
            </h3>
            <p class="text-hs2-text-light">
              Get notified of activity at Preline
            </p>
          </div>

          <div class="space-y-4">
            <!-- Card -->
            <div class="flex flex-col bg-white border shadow-sm rounded-xl ">
              <label for="hs-account-activity" class="flex p-4 md:p-5">
                <span class="flex mr-5">
                  <svg class="flex-shrink-0 mt-1 w-5 h-5 text-hs2-text-light" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
                  </svg>

                  <span class="ml-5">
                    <span class="block font-medium text-hs2-text ">Account Activity</span>
                    <span class="block text-sm text-hs2-text-light">Get important notifications about you or activity you've missed</span>
                  </span>
                </span>

                <input type="checkbox" id="hs-account-activity" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none text-hs2-success checked:bg-hs2-success border-2 rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-hs2-success focus:ring-hs2-success ring-offset-white focus:outline-none appearance-none 

                before:inline-block before:w-6 before:h-6 before:bg-white before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 " checked>
              </label>
            </div>
            <!-- End Card -->

            <!-- Card -->
            <div class="flex flex-col bg-white border shadow-sm rounded-xl ">
              <label for="hs-meetups-near-you" class="flex p-4 md:p-5">
                <span class="flex mr-5">
                  <svg class="flex-shrink-0 mt-1 w-5 h-5 text-hs2-text-light" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" />
                  </svg>

                  <span class="ml-5">
                    <span class="block font-medium text-hs2-text ">Meetups Near You</span>
                    <span class="block text-sm text-hs2-text-light">Get an email when a Preline Meetup is posted close to my location</span>
                  </span>
                </span>

                <input type="checkbox" id="hs-meetups-near-you" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none text-hs2-success checked:bg-hs2-success border-2 rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-hs2-success focus:ring-hs2-success ring-offset-white focus:outline-none appearance-none 

                before:inline-block before:w-6 before:h-6 before:bg-white before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 ">
              </label>
            </div>
            <!-- End Card -->

            <!-- Card -->
            <div class="flex flex-col bg-white border shadow-sm rounded-xl ">
              <label for="hs-preline-communication" class="flex p-4 md:p-5">
                <span class="flex mr-5">
                  <svg class="flex-shrink-0 mt-1 w-5 h-5 text-hs2-text-light" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z" />
                    <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                  </svg>

                  <span class="ml-5">
                    <span class="block font-medium text-hs2-text ">Communication</span>
                    <span class="block text-sm text-hs2-text-light">Get news, announcements, and product updates</span>
                  </span>
                </span>

                <input type="checkbox" id="hs-preline-communication" class="relative shrink-0 w-[3.25rem] h-7 bg-gray-100 checked:bg-none text-hs2-success checked:bg-hs2-success border-2 rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-hs2-success focus:ring-hs2-success ring-offset-white focus:outline-none appearance-none 

                before:inline-block before:w-6 before:h-6 before:bg-white before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 ">
              </label>
            </div>
            <!-- End Card -->
          </div>
        </div>

        <div class="flex justify-end items-center gap-x-2 py-3 px-4 bg-gray-50 border-t ">
          <button type="button" class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white hover:bg-hs2-danger text-hs2-danger hover:text-white border-hs2-danger shadow-sm align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-danger transition-all text-sm " data-hs-overlay="#hs-notifications">
            Cancel
          </button>
          <a class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " href="#">
            Update notifications
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[30rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-modal-signin">
      Open modal
    </button>
  </div>

  <div id="hs-modal-signin" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="bg-white border border-gray-200 rounded-xl shadow-sm ">
        <div class="p-4 sm:p-7">
          <div class="text-center">
            <h2 class="block text-2xl font-bold text-hs2-text ">Sign in</h2>
            <p class="mt-2 text-sm text-hs2-text-light ">
              Don't have an account yet?
              <a class="text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#" </a>
            </p>
          </div>

          <div class="mt-5">
            <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-hs2-text shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary transition-all text-sm " href="#">
              <svg class="w-4 h-auto" width="46" height="47" fill="none" viewBox="0 0 23 23">
                <path fill="#f3f3f3" d="M0 0h23v23H0z" />
                <path fill="#f35325" d="M1 1h10v10H1z" />
                <path fill="#81bc06" d="M12 1h10v10H12z" />
                <path fill="#05a6f0" d="M1 12h10v10H1z" />
                <path fill="#ffba08" d="M12 12h10v10H12z" />
              </svg>
              Sign up with Microsoft
            </a>

            <div class="py-3 flex items-center text-xs text-hs2-text-light uppercase before:flex-[1_1_0%] before:border-t before:border-gray-200 before:mr-6 after:flex-[1_1_0%] after:border-t after:border-gray-200 after:ml-6 ">Or</div>

            <!-- Form -->
            <form class="hs2-text">
              <div class="grid gap-y-4">
                <!-- Form Group -->
                <div>
                  <label for="email" class="block text-sm mb-2 ">Email address</label>
                  <div class="relative">
                    <input type="email" id="email" name="email" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary " required aria-describedby="email-error">
                    <div class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
                      <svg class="h-5 w-5 text-hs2-danger" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
                      </svg>
                    </div>
                  </div>
                  <p class="hidden text-xs text-hs2-danger mt-2" id="email-error">Please include a valid email address so we can get back to you</p>
                </div>
                <!-- End Form Group -->

                <!-- Form Group -->
                <div>
                  <div class="flex justify-between items-center">
                    <label for="password" class="block text-sm mb-2 ">Password</label>
                    <a class="text-sm text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">Forgot password?</a>
                  </div>
                  <div class="relative">
                    <input type="password" id="password" name="password" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary " required aria-describedby="password-error">
                    <div class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
                      <svg class="h-5 w-5 text-hs2-danger" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
                      </svg>
                    </div>
                  </div>
                  <p class="hidden text-xs text-hs2-danger mt-2" id="password-error">8+ characters required</p>
                </div>
                <!-- End Form Group -->

                <!-- Checkbox -->
                <div class="flex items-center">
                  <div class="flex">
                    <input id="remember-me" name="remember-me" type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-success pointer-events-none focus:ring-hs2-success ">
                  </div>
                  <div class="ml-3">
                    <label for="remember-me" class="text-sm ">Remember me</label>
                  </div>
                </div>
                <!-- End Checkbox -->

                <button type="submit" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm ">Sign in</button>
              </div>
            </form>
            <!-- End Form -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[36rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-modal-signup">
      Open modal
    </button>
  </div>

  <div id="hs-modal-signup" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="bg-white border border-gray-200 rounded-xl shadow-sm ">
        <div class="p-4 sm:p-7">
          <div class="text-center">
            <h2 class="block text-hs2-primary text-2xl font-bold hs2-text ">Sign up</h2>
            <p class="mt-2 text-sm hs2-text-light ">
              Already have an account?
              <a class="text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">
                Sign in here
              </a>
            </p>
          </div>

          <div class="mt-5">
            <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white hs2-text shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary transition-all text-sm " href="#">
              <svg class="w-4 h-auto" width="46" height="47" fill="none" viewBox="0 0 23 23">
                <path fill="#f3f3f3" d="M0 0h23v23H0z" />
                <path fill="#f35325" d="M1 1h10v10H1z" />
                <path fill="#81bc06" d="M12 1h10v10H12z" />
                <path fill="#05a6f0" d="M1 12h10v10H1z" />
                <path fill="#ffba08" d="M12 12h10v10H12z" />
              </svg>
              Sign up with Microsoft
            </a>

            <div class="py-3 flex items-center text-xs text-hs2-text-light uppercase before:flex-[1_1_0%] before:border-t before:border-gray-200 before:mr-6 after:flex-[1_1_0%] after:border-t after:border-gray-200 after:ml-6 ">Or</div>

            <!-- Form -->
            <form>
              <div class="grid gap-y-4">
                <!-- Form Group -->
                <div>
                  <label for="email" class="block text-sm mb-2 ">Email address</label>
                  <div class="relative">
                    <input type="email" id="email" name="email" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary " required aria-describedby="email-error">
                    <div class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
                      <svg class="h-5 w-5 text-hs2-danger" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
                      </svg>
                    </div>
                  </div>
                  <p class="hidden text-xs text-hs2-danger mt-2" id="email-error">Please include a valid email address so we can get back to you</p>
                </div>
                <!-- End Form Group -->

                <!-- Form Group -->
                <div>
                  <label for="password" class="block text-sm mb-2 ">Password</label>
                  <div class="relative">
                    <input type="password" id="password" name="password" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary " required aria-describedby="password-error">
                    <div class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
                      <svg class="h-5 w-5 text-hs2-danger" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
                      </svg>
                    </div>
                  </div>
                  <p class="hidden text-xs text-hs2-danger mt-2" id="password-error">8+ characters required</p>
                </div>
                <!-- End Form Group -->

                <!-- Form Group -->
                <div>
                  <label for="confirm-password" class="block text-sm mb-2 ">Confirm Password</label>
                  <div class="relative">
                    <input type="password" id="confirm-password" name="confirm-password" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary " required aria-describedby="confirm-password-error">
                    <div class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
                      <svg class="h-5 w-5 text-hs2-danger" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
                      </svg>
                    </div>
                  </div>
                  <p class="hidden text-xs text-hs2-danger mt-2" id="confirm-password-error">Password does not match the password</p>
                </div>
                <!-- End Form Group -->

                <!-- Checkbox -->
                <div class="flex items-center">
                  <div class="flex">
                    <input id="remember-me" name="remember-me" type="checkbox" class="shrink-0 mt-0.5 border-gray-200 rounded text-hs2-success pointer-events-none focus:ring-hs2-success ">
                  </div>
                  <div class="ml-3">
                    <label for="remember-me" class="text-sm ">I accept the <a class="text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">Terms and Conditions</a></label>
                  </div>
                </div>
                <!-- End Checkbox -->

                <button type="submit" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm ">Sign up</button>
              </div>
            </form>
            <!-- End Form -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[20rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-modal-recover-account">
      Open modal
    </button>
  </div>

  <div id="hs-modal-recover-account" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="bg-white border border-gray-200 rounded-xl shadow-sm ">
        <div class="p-4 sm:p-7">
          <div class="text-center">
            <h2 class="block text-2xl font-bold text-hs2-primary ">Forgot password?</h2>
            <p class="mt-2 text-sm hs2-text-light ">
              Remember your password?
              <a class="text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#">
                Sign in here
              </a>
            </p>
          </div>

          <div class="mt-5">
            <!-- Form -->
            <form>
              <div class="grid gap-y-4">
                <!-- Form Group -->
                <div>
                  <label for="email" class="block text-sm mb-2 ">Email address</label>
                  <div class="relative">
                    <input type="email" id="email" name="email" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary " required aria-describedby="email-error">
                    <div class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
                      <svg class="h-5 w-5 text-hs2-danger" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
                      </svg>
                    </div>
                  </div>
                  <p class="hidden text-xs text-hs2-danger mt-2" id="email-error">Please include a valid email address so we can get back to you</p>
                </div>
                <!-- End Form Group -->

                <button type="submit" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-success text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-hs2-success focus:ring-offset-2 transition-all text-sm ">Reset password</button>
              </div>
            </form>
            <!-- End Form -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[20rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-sign-out-alert">
      Open modal
    </button>
  </div>

  <div id="hs-sign-out-alert" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="relative flex flex-col bg-white shadow-lg rounded-xl ">
        <div class="absolute top-2 right-2">
          <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-white bg-hs2-danger hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 focus:ring-offset-white transition-all text-sm " data-hs-overlay="#hs-sign-out-alert">
            <span class="sr-only">Close</span>
            <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
            </svg>
          </button>
        </div>

        <div class="p-4 sm:p-10 text-center overflow-y-auto">
          <!-- Icon -->
          <span class="mb-4 inline-flex justify-center items-center w-[62px] h-[62px] rounded-full border-4 border-hs2-warning bg-hs2-warning text-white ">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
            </svg>
          </span>
          <!-- End Icon -->

          <h3 class="mb-2 text-2xl font-bold text-hs2-primary ">
            Sign out
          </h3>
          <p class="text-hs2-text-light">
            Are you sure you would like to sign out of your account?
          </p>

          <div class="mt-6 flex justify-center gap-x-4">
            <a class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-hs2-success text-white hover:bg-hs2-success-hover shadow-sm align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-success transition-all text-sm " href="#">
              Sign out
            </a>
            <button type="button" class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-danger text-white hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-sign-out-alert">
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[25rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary-500 text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary-500 focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-sign-out-alert-small-window">
      Open modal
    </button>
  </div>

  <div id="hs-sign-out-alert-small-window" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-xs sm:w-full m-3 sm:mx-auto">
      <div class="relative flex flex-col bg-white shadow-lg rounded-xl ">
        <div class="absolute top-2 right-2">
          <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-white bg-hs2-danger hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 focus:ring-offset-white transition-all text-sm " data-hs-overlay="#hs-sign-out-alert">
            <span class="sr-only">Close</span>
            <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
            </svg>
          </button>
        </div>

        <div class="p-4 sm:p-10 text-center overflow-y-auto">
          <!-- Icon -->
          <span class="mb-4 inline-flex justify-center items-center w-[62px] h-[62px] rounded-full border-4 border-hs2-warning bg-hs2-warning text-white ">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
            </svg>
          </span>
          <!-- End Icon -->

          <h3 class="mb-2 text-2xl font-bold text-hs2-primary ">
            Sign out
          </h3>
          <p class="text-hs2-text-light">
            Are you sure you would like to sign out of your account?
          </p>

          <div class="mt-6 flex justify-center gap-x-4">
            <a class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-hs2-success text-white hover:bg-hs2-success-hover shadow-sm align-middle focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-success transition-all text-sm " href="#">
              Sign out
            </a>
            <button type="button" class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-danger text-white hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-sign-out-alert">
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[25rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-task-created-alert">
      Open modal
    </button>
  </div>

  <div id="hs-task-created-alert" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="relative flex flex-col bg-white shadow-lg rounded-xl ">
        <div class="absolute top-2 right-2">
          <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-white hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 focus:ring-offset-white transition-all text-sm " data-hs-overlay="#hs-task-created-alert">
            <span class="sr-only">Close</span>
            <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
            </svg>
          </button>
        </div>

        <div class="p-4 sm:p-10 text-center overflow-y-auto">
          <!-- Icon -->
          <span class="mb-4 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-hs2-success bg-hs2-success text-white ">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
            </svg>
          </span>
          <!-- End Icon -->

          <h3 class="mb-2 text-xl font-bold text-hs2-primary ">
            Task successfully created!
          </h3>
          <p class="text-hs2-text-light">
            You can see the progress of your task in your <a class="inline-flex items-center gap-x-1.5 text-hs2-link hover:text-hs2-hover-state decoration-2 hover:underline font-medium" href="#"> account.</a> You will be notified of its completion.
          </p>

          <div class="mt-6 flex justify-center gap-x-4">
            <button type="button" class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-hs2-danger text-white shadow-sm align-middle hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-danger transition-all text-sm " data-hs-overlay="#hs-task-created-alert">
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[30rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-subscription-with-image">
      Open modal
    </button>
  </div>

  <div id="hs-subscription-with-image" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
      <div class="relative flex flex-col bg-white shadow-lg rounded-xl ">
        <div class="absolute top-2 right-2 z-[10]">
          <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-white hover:bg-hs2-danger-hover bg-hs2-danger focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 focus:ring-offset-white transition-all text-sm " data-hs-overlay="#hs-subscription-with-image">
            <span class="sr-only">Close</span>
            <svg class="w-3 h-3" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
            </svg>
          </button>
        </div>

        <div class="aspect-w-16 aspect-h-8">
          <img class="w-full object-cover rounded-t-xl" src="/assets/images/app-toolkit/placeholder-1.jpg" alt="Image Description">
        </div>

        <div class="p-4 sm:p-10 text-center overflow-y-auto">
          <h3 class="mb-2 text-2xl font-bold text-hs2-primary ">
            Thanks 🎉
          </h3>
          <p class="text-hs2-text-light">
            Thank you for your subscription. You will be sent the next issue of our newsletter shortly.
          </p>

          <div class="mt-6 flex justify-center gap-x-4">
            <button type="button" class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-subscription-with-image">
              Got it
            </button>
            <a class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold text-hs2-link hover:text-hs2-hover-state focus:outline-none focus:ring-2 ring-offset-white focus:ring-hs2-link focus:ring-offset-2 transition-all text-sm" href="#">
              Settings
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="min-h-[25rem]">
  <div class="text-center">
    <button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm " data-hs-overlay="#hs-danger-alert">
      Open modal
    </button>
  </div>

  <div id="hs-danger-alert" class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
    <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all md:max-w-2xl md:w-full m-3 md:mx-auto">
      <div class="relative flex flex-col bg-white border shadow-sm rounded-xl overflow-hidden ">
        <div class="absolute top-2 right-2">
          <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-white hover:bg-hs2-danger-hover bg-hs2-danger focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 focus:ring-offset-white transition-all text-sm " data-hs-overlay="#hs-danger-alert">
            <span class="sr-only">Close</span>
            <svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
            </svg>
          </button>
        </div>

        <div class="p-4 sm:p-10 overflow-y-auto">
          <div class="flex gap-x-4 md:gap-x-7">
            <!-- Icon -->
            <span class="flex-shrink-0 inline-flex justify-center items-center w-[46px] h-[46px] sm:w-[62px] sm:h-[62px] rounded-full border-4 border-hs2-danger bg-hs2-danger text-white ">
              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
              </svg>
            </span>
            <!-- End Icon -->

            <div class="grow">
              <h3 class="mb-2 text-xl font-bold text-hs2-primary ">
                Delete Personal Account
              </h3>
              <p class="text-hs2-text-light">
                Permanently remove your Personal Account and all of its contents from the platform. This action is not reversible, so please continue with caution.
              </p>
            </div>
          </div>
        </div>

        <div class="flex justify-end items-center gap-x-2 py-3 px-4 bg-gray-50 border-t ">
          <button type="button" class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-hs2-text shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary transition-all text-sm " data-hs-overlay="#hs-danger-alert">
            Cancel
          </button>
          <a class="py-2.5 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-danger text-white hover:bg-hs2-danger-hover focus:outline-none focus:ring-2 focus:ring-hs2-danger focus:ring-offset-2 transition-all text-sm " href="#">
            Delete personal account
          </a>
        </div>
      </div>
    </div>
  </div>
</div>