<div class="text-center">
  <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ai-modal" data-hs-overlay="#hs-ai-modal">
    Open modal
  </button>
</div>

<!-- Modal -->
<div id="hs-ai-modal" class="hs-overlay hidden size-full fixed top-0 start-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-ai-modal-label">
  <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
    <div class="relative flex flex-col bg-white shadow-lg rounded-xl pointer-events-auto dark:bg-neutral-800">
      <div class="relative overflow-hidden min-h-32 bg-gray-900 text-center rounded-t-xl dark:bg-neutral-950">
        <!-- Close Button -->
        <div class="absolute top-2 end-2">
          <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-white/10 text-white hover:bg-white/20 focus:outline-hidden focus:bg-white/20 disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-bg-gray-on-hover-cards" data-hs-remove-element="#hs-ai-modal">
            <span class="sr-only">Close</span>
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
          </button>
        </div>
        <!-- End Close Button -->

        <!-- SVG Background Element -->
        <figure class="absolute inset-x-0 bottom-0 -mb-px">
          <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
            <path fill="currentColor" class="fill-white dark:fill-neutral-800" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
          </svg>
        </figure>
        <!-- End SVG Background Element -->
      </div>

      <div class="relative z-10 -mt-12">
        <!-- Icon -->
        <span class="mx-auto flex justify-center items-center size-15.5 rounded-full border border-gray-200 bg-white text-gray-700 shadow-2xs dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">
          <svg class="shrink-0 size-6" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z"/>
            <path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
          </svg>
        </span>
        <!-- End Icon -->
      </div>

      <!-- Body -->
      <div class="p-4 sm:p-7 overflow-y-auto">
        <div class="text-center">
          <h3 id="hs-ai-modal-label" class="text-lg font-semibold text-gray-800 dark:text-neutral-200">
            Invoice from Preline
          </h3>
          <p class="text-sm text-gray-500 dark:text-neutral-500">
            Invoice #3682303
          </p>
        </div>

        <!-- Grid -->
        <div class="mt-5 sm:mt-10 grid grid-cols-2 sm:grid-cols-3 gap-5">
          <div>
            <span class="block text-xs uppercase text-gray-500 dark:text-neutral-500">Amount paid:</span>
            <span class="block text-sm font-medium text-gray-800 dark:text-neutral-200">$316.8</span>
          </div>
          <!-- End Col -->

          <div>
            <span class="block text-xs uppercase text-gray-500 dark:text-neutral-500">Date paid:</span>
            <span class="block text-sm font-medium text-gray-800 dark:text-neutral-200">April 22, 2020</span>
          </div>
          <!-- End Col -->

          <div>
            <span class="block text-xs uppercase text-gray-500 dark:text-neutral-500">Payment method:</span>
            <div class="flex items-center gap-x-2">
              <svg class="size-5" width="400" height="248" viewBox="0 0 400 248" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0)">
                <path d="M254 220.8H146V26.4H254V220.8Z" fill="#FF5F00"/>
                <path d="M152.8 123.6C152.8 84.2 171.2 49 200 26.4C178.2 9.2 151.4 0 123.6 0C55.4 0 0 55.4 0 123.6C0 191.8 55.4 247.2 123.6 247.2C151.4 247.2 178.2 238 200 220.8C171.2 198.2 152.8 163 152.8 123.6Z" fill="#EB001B"/>
                <path d="M400 123.6C400 191.8 344.6 247.2 276.4 247.2C248.6 247.2 221.8 238 200 220.8C228.8 198.2 247.2 163 247.2 123.6C247.2 84.2 228.8 49 200 26.4C221.8 9.2 248.6 0 276.4 0C344.6 0 400 55.4 400 123.6Z" fill="#F79E1B"/>
                </g>
                <defs>
                <clipPath id="clip0">
                <rect width="400" height="247.2" fill="white"/>
                </clipPath>
                </defs>
              </svg>
              <span class="block text-sm font-medium text-gray-800 dark:text-neutral-200">•••• 4242</span>
            </div>
          </div>
          <!-- End Col -->
        </div>
        <!-- End Grid -->

        <div class="mt-5 sm:mt-10">
          <h4 class="text-xs font-semibold uppercase text-gray-800 dark:text-neutral-200">Summary</h4>

          <ul class="mt-3 flex flex-col">
            <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-neutral-700 dark:text-neutral-200">
              <div class="flex items-center justify-between w-full">
                <span>Payment to Front</span>
                <span>$264.00</span>
              </div>
            </li>
            <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-neutral-700 dark:text-neutral-200">
              <div class="flex items-center justify-between w-full">
                <span>Tax fee</span>
                <span>$52.8</span>
              </div>
            </li>
            <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-gray-50 border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200">
              <div class="flex items-center justify-between w-full">
                <span>Amount paid</span>
                <span>$316.8</span>
              </div>
            </li>
          </ul>
        </div>

        <!-- Button -->
        <div class="mt-5 flex justify-end gap-x-2">
          <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
            Invoice PDF
          </a>
          <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" href="#">
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
            Print
          </a>
        </div>
        <!-- End Buttons -->

        <div class="mt-5 sm:mt-10">
          <p class="text-sm text-gray-500 dark:text-neutral-500">If you have any questions, please contact us at <a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500" href="#">example@site.com</a> or call at <a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500" href="tel:+1898345492">+1 898-34-5492</a></p>
        </div>
      </div>
      <!-- End Body -->
    </div>
  </div>
</div>
<!-- End Modal -->

<div class="text-center">
  <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-ai-offcanvas" data-hs-overlay="#hs-ai-offcanvas">
    Open offcanvas
  </button>
</div>

<div id="hs-ai-offcanvas" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 end-0 transition-all duration-300 transform h-full max-w-md w-full z-80 bg-white dark:bg-neutral-800" role="dialog" tabindex="-1" aria-labelledby="hs-ai-offcanvas-label">
  <div class="relative overflow-hidden min-h-32 text-center bg-[url('https://preline.co/assets/svg/examples/abstract-bg-1.svg')] bg-no-repeat bg-center">
    <!-- Close Button -->
    <div class="absolute top-2 end-2">
      <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-hidden focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-ai-offcanvas">
        <span class="sr-only">Close</span>
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>
    </div>
    <!-- End Close Button -->

    <!-- SVG Background Element -->
    <figure class="absolute inset-x-0 bottom-0 -mb-px">
      <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
        <path fill="currentColor" class="fill-white dark:fill-neutral-800" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
      </svg>
    </figure>
    <!-- End SVG Background Element -->
  </div>

  <div class="relative z-10 -mt-12">
    <!-- Icon -->
    <span class="mx-auto flex justify-center items-center size-15.5 rounded-full border border-gray-200 bg-white text-gray-700 shadow-2xs dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">
      <svg class="size-6" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z"/>
        <path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
      </svg>
    </span>
    <!-- End Icon -->
  </div>

  <!-- Body -->
  <div class="p-4 sm:p-7 overflow-y-auto">
    <div class="text-center">
      <h3 id="hs-ai-offcanvas-label" class="text-lg font-semibold text-gray-800 dark:text-neutral-200">
        Invoice from Preline
      </h3>
      <p class="text-sm text-gray-500 dark:text-neutral-500">
        Invoice #3682303
      </p>
    </div>

    <!-- Grid -->
    <div class="mt-5 sm:mt-10 grid grid-cols-2 sm:grid-cols-3 gap-5">
      <div>
        <span class="block text-xs uppercase text-gray-500 dark:text-neutral-500">Amount paid:</span>
        <span class="block text-sm font-medium text-gray-800 dark:text-neutral-200">$316.8</span>
      </div>
      <!-- End Col -->

      <div>
        <span class="block text-xs uppercase text-gray-500 dark:text-neutral-500">Date paid:</span>
        <span class="block text-sm font-medium text-gray-800 dark:text-neutral-200">April 22, 2020</span>
      </div>
      <!-- End Col -->

      <div>
        <span class="block text-xs uppercase text-gray-500 dark:text-neutral-500">Payment method:</span>
        <div class="flex items-center gap-x-2">
          <svg class="size-5" width="400" height="248" viewBox="0 0 400 248" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0)">
            <path d="M254 220.8H146V26.4H254V220.8Z" fill="#FF5F00"/>
            <path d="M152.8 123.6C152.8 84.2 171.2 49 200 26.4C178.2 9.2 151.4 0 123.6 0C55.4 0 0 55.4 0 123.6C0 191.8 55.4 247.2 123.6 247.2C151.4 247.2 178.2 238 200 220.8C171.2 198.2 152.8 163 152.8 123.6Z" fill="#EB001B"/>
            <path d="M400 123.6C400 191.8 344.6 247.2 276.4 247.2C248.6 247.2 221.8 238 200 220.8C228.8 198.2 247.2 163 247.2 123.6C247.2 84.2 228.8 49 200 26.4C221.8 9.2 248.6 0 276.4 0C344.6 0 400 55.4 400 123.6Z" fill="#F79E1B"/>
            </g>
            <defs>
            <clipPath id="clip0">
            <rect width="400" height="247.2" fill="white"/>
            </clipPath>
            </defs>
          </svg>
          <span class="block text-sm font-medium text-gray-800 dark:text-neutral-200">•••• 4242</span>
        </div>
      </div>
      <!-- End Col -->
    </div>
    <!-- End Grid -->

    <div class="mt-5 sm:mt-10">
      <h4 class="text-xs font-semibold uppercase text-gray-800 dark:text-neutral-200">Summary</h4>

      <ul class="mt-3 flex flex-col">
        <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-neutral-700 dark:text-neutral-200">
          <div class="flex items-center justify-between w-full">
            <span>Payment to Front</span>
            <span>$264.00</span>
          </div>
        </li>
        <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:border-neutral-700 dark:text-neutral-200">
          <div class="flex items-center justify-between w-full">
            <span>Tax fee</span>
            <span>$52.8</span>
          </div>
        </li>
        <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-semibold bg-gray-50 border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-200">
          <div class="flex items-center justify-between w-full">
            <span>Amount paid</span>
            <span>$316.8</span>
          </div>
        </li>
      </ul>
    </div>

    <!-- Button -->
    <div class="mt-5 flex justify-end gap-x-2">
      <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
        Invoice PDF
      </a>
      <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" href="#">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
        Print
      </a>
    </div>
    <!-- End Buttons -->

    <div class="mt-5 sm:mt-10">
      <p class="text-sm text-gray-500 dark:text-neutral-500">If you have any questions, please contact us at <a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500" href="#">example@site.com</a> or call at <a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500" href="tel:+1898345492">+1 898-34-5492</a></p>
    </div>
  </div>
  <!-- End Body -->
</div>

<script>
  window.addEventListener('load', () => {
    setTimeout(() => {
      document.querySelectorAll('.hs-overlay').forEach((el) => HSOverlay.open(el));
    });
  });
</script>

<!-- Invoice -->
<div class="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
  <!-- Grid -->
  <div class="mb-5 pb-5 flex justify-between items-center border-b border-gray-200 dark:border-neutral-700">
    <div>
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-neutral-200">Invoice</h2>
    </div>
    <!-- Col -->

    <div class="inline-flex gap-x-2">
      <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
        Invoice PDF
      </a>
      <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" href="#">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
        Print
      </a>
    </div>
    <!-- Col -->
  </div>
  <!-- End Grid -->

  <!-- Grid -->
  <div class="grid md:grid-cols-2 gap-3">
    <div>
      <div class="grid space-y-3">
        <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
          <dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
            Billed to:
          </dt>
          <dd class="text-gray-800 dark:text-neutral-200">
            <a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline focus:outline-hidden focus:underline font-medium dark:text-blue-500" href="#">
              sara@site.com
            </a>
          </dd>
        </dl>

        <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
          <dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
            Billing details:
          </dt>
          <dd class="font-medium text-gray-800 dark:text-neutral-200">
            <span class="block font-semibold">Sara Williams</span>
            <address class="not-italic font-normal">
              280 Suzanne Throughway,<br>
              Breannabury, OR 45801,<br>
              United States<br>
            </address>
          </dd>
        </dl>

        <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
          <dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
            Shipping details:
          </dt>
          <dd class="font-medium text-gray-800 dark:text-neutral-200">
            <span class="block font-semibold">Sara Williams</span>
            <address class="not-italic font-normal">
              280 Suzanne Throughway,<br>
              Breannabury, OR 45801,<br>
              United States<br>
            </address>
          </dd>
        </dl>
      </div>
    </div>
    <!-- Col -->

    <div>
      <div class="grid space-y-3">
        <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
          <dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
            Invoice number:
          </dt>
          <dd class="font-medium text-gray-800 dark:text-neutral-200">
            ADUQ2189H1-0038
          </dd>
        </dl>

        <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
          <dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
            Currency:
          </dt>
          <dd class="font-medium text-gray-800 dark:text-neutral-200">
            USD - US Dollar
          </dd>
        </dl>

        <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
          <dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
            Due date:
          </dt>
          <dd class="font-medium text-gray-800 dark:text-neutral-200">
            10 Jan 2023
          </dd>
        </dl>

        <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
          <dt class="min-w-36 max-w-50 text-gray-500 dark:text-neutral-500">
            Billing method:
          </dt>
          <dd class="font-medium text-gray-800 dark:text-neutral-200">
            Send invoice
          </dd>
        </dl>
      </div>
    </div>
    <!-- Col -->
  </div>
  <!-- End Grid -->

  <!-- Table -->
  <div class="mt-6 border border-gray-200 p-4 rounded-lg space-y-4 dark:border-neutral-700">
    <div class="hidden sm:grid sm:grid-cols-5">
      <div class="sm:col-span-2 text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Item</div>
      <div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Qty</div>
      <div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Rate</div>
      <div class="text-end text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Amount</div>
    </div>

    <div class="hidden sm:block border-b border-gray-200 dark:border-neutral-700"></div>

    <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
      <div class="col-span-full sm:col-span-2">
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Item</h5>
        <p class="font-medium text-gray-800 dark:text-neutral-200">Design UX and UI</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Qty</h5>
        <p class="text-gray-800 dark:text-neutral-200">1</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Rate</h5>
        <p class="text-gray-800 dark:text-neutral-200">5</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Amount</h5>
        <p class="sm:text-end text-gray-800 dark:text-neutral-200">$500</p>
      </div>
    </div>

    <div class="sm:hidden border-b border-gray-200 dark:border-neutral-700"></div>

    <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
      <div class="col-span-full sm:col-span-2">
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Item</h5>
        <p class="font-medium text-gray-800 dark:text-neutral-200">Web project</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Qty</h5>
        <p class="text-gray-800 dark:text-neutral-200">1</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Rate</h5>
        <p class="text-gray-800 dark:text-neutral-200">24</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Amount</h5>
        <p class="sm:text-end text-gray-800 dark:text-neutral-200">$1250</p>
      </div>
    </div>

    <div class="sm:hidden border-b border-gray-200 dark:border-neutral-700"></div>

    <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
      <div class="col-span-full sm:col-span-2">
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Item</h5>
        <p class="font-medium text-gray-800 dark:text-neutral-200">SEO</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Qty</h5>
        <p class="text-gray-800 dark:text-neutral-200">1</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Rate</h5>
        <p class="text-gray-800 dark:text-neutral-200">6</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Amount</h5>
        <p class="sm:text-end text-gray-800 dark:text-neutral-200">$2000</p>
      </div>
    </div>
  </div>
  <!-- End Table -->

  <!-- Flex -->
  <div class="mt-8 flex sm:justify-end">
    <div class="w-full max-w-2xl sm:text-end space-y-2">
      <!-- Grid -->
      <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
        <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
          <dt class="col-span-3 text-gray-500 dark:text-neutral-500">Subotal:</dt>
          <dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">$2750.00</dd>
        </dl>

        <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
          <dt class="col-span-3 text-gray-500 dark:text-neutral-500">Total:</dt>
          <dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">$2750.00</dd>
        </dl>

        <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
          <dt class="col-span-3 text-gray-500 dark:text-neutral-500">Tax:</dt>
          <dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">$39.00</dd>
        </dl>

        <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
          <dt class="col-span-3 text-gray-500 dark:text-neutral-500">Amount paid:</dt>
          <dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">$2789.00</dd>
        </dl>

        <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
          <dt class="col-span-3 text-gray-500 dark:text-neutral-500">Due balance:</dt>
          <dd class="col-span-2 font-medium text-gray-800 dark:text-neutral-200">$0.00</dd>
        </dl>
      </div>
      <!-- End Grid -->
    </div>
  </div>
  <!-- End Flex -->
</div>
<!-- End Invoice -->

<!-- Invoice -->
<div class="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
  <div class="sm:w-11/12 lg:w-3/4 mx-auto">
    <!-- Card -->
    <div class="flex flex-col p-4 sm:p-10 bg-white shadow-md rounded-xl dark:bg-neutral-800">
      <!-- Grid -->
      <div class="flex justify-between">
        <div>
          <svg class="size-10" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 26V13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25H12" class="stroke-blue-600 dark:stroke-white" stroke="currentColor" stroke-width="2"/>
            <path d="M5 26V13.16C5 8.65336 8.58172 5 13 5C17.4183 5 21 8.65336 21 13.16C21 17.6666 17.4183 21.32 13 21.32H12" class="stroke-blue-600 dark:stroke-white" stroke="currentColor" stroke-width="2"/>
            <circle cx="13" cy="13.0214" r="5" fill="currentColor" class="fill-blue-600 dark:fill-white"/>
          </svg>

          <h1 class="mt-2 text-lg md:text-xl font-semibold text-blue-600 dark:text-white">Preline Inc.</h1>
        </div>
        <!-- Col -->

        <div class="text-end">
          <h2 class="text-2xl md:text-3xl font-semibold text-gray-800 dark:text-neutral-200">Invoice #</h2>
          <span class="mt-1 block text-gray-500 dark:text-neutral-500">3682303</span>

          <address class="mt-4 not-italic text-gray-800 dark:text-neutral-200">
            45 Roker Terrace<br>
            Latheronwheel<br>
            KW5 8NW, London<br>
            United Kingdom<br>
          </address>
        </div>
        <!-- Col -->
      </div>
      <!-- End Grid -->

      <!-- Grid -->
      <div class="mt-8 grid sm:grid-cols-2 gap-3">
        <div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-neutral-200">Bill to:</h3>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-neutral-200">Sara Williams</h3>
          <address class="mt-2 not-italic text-gray-500 dark:text-neutral-500">
            280 Suzanne Throughway,<br>
            Breannabury, OR 45801,<br>
            United States<br>
          </address>
        </div>
        <!-- Col -->

        <div class="sm:text-end space-y-2">
          <!-- Grid -->
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-gray-800 dark:text-neutral-200">Invoice date:</dt>
              <dd class="col-span-2 text-gray-500 dark:text-neutral-500">03/10/2018</dd>
            </dl>
            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-gray-800 dark:text-neutral-200">Due date:</dt>
              <dd class="col-span-2 text-gray-500 dark:text-neutral-500">03/11/2018</dd>
            </dl>
          </div>
          <!-- End Grid -->
        </div>
        <!-- Col -->
      </div>
      <!-- End Grid -->

      <!-- Table -->
      <div class="mt-6">
        <div class="border border-gray-200 p-4 rounded-lg space-y-4 dark:border-neutral-700">
          <div class="hidden sm:grid sm:grid-cols-5">
            <div class="sm:col-span-2 text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Item</div>
            <div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Qty</div>
            <div class="text-start text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Rate</div>
            <div class="text-end text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Amount</div>
          </div>

          <div class="hidden sm:block border-b border-gray-200 dark:border-neutral-700"></div>

          <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
            <div class="col-span-full sm:col-span-2">
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Item</h5>
              <p class="font-medium text-gray-800 dark:text-neutral-200">Design UX and UI</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Qty</h5>
              <p class="text-gray-800 dark:text-neutral-200">1</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Rate</h5>
              <p class="text-gray-800 dark:text-neutral-200">5</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Amount</h5>
              <p class="sm:text-end text-gray-800 dark:text-neutral-200">$500</p>
            </div>
          </div>

          <div class="sm:hidden border-b border-gray-200 dark:border-neutral-700"></div>

          <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
            <div class="col-span-full sm:col-span-2">
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Item</h5>
              <p class="font-medium text-gray-800 dark:text-neutral-200">Web project</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Qty</h5>
              <p class="text-gray-800 dark:text-neutral-200">1</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Rate</h5>
              <p class="text-gray-800 dark:text-neutral-200">24</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Amount</h5>
              <p class="sm:text-end text-gray-800 dark:text-neutral-200">$1250</p>
            </div>
          </div>

          <div class="sm:hidden border-b border-gray-200 dark:border-neutral-700"></div>

          <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
            <div class="col-span-full sm:col-span-2">
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Item</h5>
              <p class="font-medium text-gray-800 dark:text-neutral-200">SEO</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Qty</h5>
              <p class="text-gray-800 dark:text-neutral-200">1</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Rate</h5>
              <p class="text-gray-800 dark:text-neutral-200">6</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-gray-500 uppercase dark:text-neutral-500">Amount</h5>
              <p class="sm:text-end text-gray-800 dark:text-neutral-200">$2000</p>
            </div>
          </div>
        </div>
      </div>
      <!-- End Table -->

      <!-- Flex -->
      <div class="mt-8 flex sm:justify-end">
        <div class="w-full max-w-2xl sm:text-end space-y-2">
          <!-- Grid -->
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-gray-800 dark:text-neutral-200">Subtotal:</dt>
              <dd class="col-span-2 text-gray-500 dark:text-neutral-500">$2750.00</dd>
            </dl>

            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-gray-800 dark:text-neutral-200">Total:</dt>
              <dd class="col-span-2 text-gray-500 dark:text-neutral-500">$2750.00</dd>
            </dl>

            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-gray-800 dark:text-neutral-200">Tax:</dt>
              <dd class="col-span-2 text-gray-500 dark:text-neutral-500">$39.00</dd>
            </dl>

            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-gray-800 dark:text-neutral-200">Amount paid:</dt>
              <dd class="col-span-2 text-gray-500 dark:text-neutral-500">$2789.00</dd>
            </dl>

            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-gray-800 dark:text-neutral-200">Due balance:</dt>
              <dd class="col-span-2 text-gray-500 dark:text-neutral-500">$0.00</dd>
            </dl>
          </div>
          <!-- End Grid -->
        </div>
      </div>
      <!-- End Flex -->

      <div class="mt-8 sm:mt-12">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-neutral-200">Thank you!</h4>
        <p class="text-gray-500 dark:text-neutral-500">If you have any questions concerning this invoice, use the following contact information:</p>
        <div class="mt-2">
          <p class="block text-sm font-medium text-gray-800 dark:text-neutral-200">example@site.com</p>
          <p class="block text-sm font-medium text-gray-800 dark:text-neutral-200">+1 (062) 109-9222</p>
        </div>
      </div>

      <p class="mt-5 text-sm text-gray-500 dark:text-neutral-500">© 2022 Preline.</p>
    </div>
    <!-- End Card -->

    <!-- Buttons -->
    <div class="mt-6 flex justify-end gap-x-3">
      <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-50 dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
        Invoice PDF
      </a>
      <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" href="#">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
        Print
      </a>
    </div>
    <!-- End Buttons -->
  </div>
</div>
<!-- End Invoice -->