Application Invoice

<div class="min-h-[40rem]">
  <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-ai-modal">
      Open modal
    </button>
  </div>

  <!-- Modal -->
  <div id="hs-ai-modal" 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="relative overflow-hidden min-h-[8rem] bg-hs2-primary text-center rounded-t-xl">
          <!-- Close Button -->
          <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-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>
          <!-- End Close Button -->

          <!-- SVG Background Element -->
          <figure class="absolute inset-x-0 bottom-0">
            <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-hs2-primary " 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 w-[62px] h-[62px] rounded-full border border-gray-200 bg-white text-hs2-primary shadow-sm ">
            <svg class="w-6 h-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 class="text-lg font-semibold text-hs2-primary ">
              Invoice from HS2
            </h3>
            <p class="text-sm text-hs2-text-light">
              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-hs2-text-light">Amount paid:</span>
              <span class="block text-sm font-medium text-hs2-text ">$316.8</span>
            </div>
            <!-- End Col -->

            <div>
              <span class="block text-xs uppercase text-hs2-text-light">Date paid:</span>
              <span class="block text-sm font-medium text-hs2-text ">April 22, 2020</span>
            </div>
            <!-- End Col -->

            <div>
              <span class="block text-xs uppercase text-hs2-text-light">Payment method:</span>
              <div class="flex items-center gap-x-2">
                <svg class="w-5 h-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-hs2-text ">•••• 4242</span>
              </div>
            </div>
            <!-- End Col -->
          </div>
          <!-- End Grid -->

          <div class="mt-5 sm:mt-10">
            <h4 class="text-xs font-semibold uppercase text-hs2-text ">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 text-hs2-text -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
                <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 text-hs2-text -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
                <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 text-hs2-text -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
                <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 justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 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-600 transition-all text-sm " href="#">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
                <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
              </svg>
              Invoice PDF
            </a>
            <a class="py-2 px-3 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="#">
              <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2H5zm6 8H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1z" />
                <path d="M0 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2H2a2 2 0 0 1-2-2V7zm2.5 1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
              </svg>
              Print
            </a>
          </div>
          <!-- End Buttons -->

          <div class="mt-5 sm:mt-10">
            <p class="text-sm text-hs2-text-light">If you have any questions, please contact us at <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="#">example@site.com</a> or call at <a class="inline-flex items-center gap-x-1.5 text-hs2-link decoration-2 hover:underline font-medium" href="tel:+1898345492">+1 898-34-5492</a></p>
          </div>
        </div>
        <!-- End Body -->
      </div>
    </div>
  </div>
  <!-- End Modal -->
</div>

<div class="min-h-[40rem]">
  <!-- Invoice -->
  <div class="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
    <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-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 right-0 transition-all duration-300 transform h-full max-w-md w-full z-[60] bg-white border-r " tabindex="-1">
      <div class="relative overflow-hidden min-h-[8rem] text-center bg-[url('../svg/component/abstract-bg-1.svg')] bg-no-repeat bg-center">
        <!-- Close Button -->
        <div class="absolute top-2 right-2">
          <button type="button" class="py-1.5 px-2 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-xs " data-hs-overlay="#hs-ai-offcanvas">
            Close
          </button>
        </div>
        <!-- End Close Button -->

        <!-- SVG Background Element -->
        <figure class="absolute inset-x-0 bottom-0">
          <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 " 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 w-[62px] h-[62px] rounded-full border border-gray-200 bg-white text-hs2-primary shadow-sm ">
          <svg class="w-6 h-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 class="text-lg font-semibold text-hs2-primary ">
            Invoice from HS2
          </h3>
          <p class="text-sm text-hs2-text-light">
            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-hs2-text-light">Amount paid:</span>
            <span class="block text-sm font-medium text-hs2-text ">$316.8</span>
          </div>
          <!-- End Col -->

          <div>
            <span class="block text-xs uppercase text-hs2-text-light">Date paid:</span>
            <span class="block text-sm font-medium text-hs2-text ">April 22, 2020</span>
          </div>
          <!-- End Col -->

          <div>
            <span class="block text-xs uppercase text-hs2-text-light">Payment method:</span>
            <div class="flex items-center gap-x-2">
              <svg class="w-5 h-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-hs2-text ">•••• 4242</span>
            </div>
          </div>
          <!-- End Col -->
        </div>
        <!-- End Grid -->

        <div class="mt-5 sm:mt-10">
          <h4 class="text-xs font-semibold uppercase text-hs2-text ">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 text-hs2-text -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
              <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 text-hs2-text -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
              <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 text-hs2-text -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
              <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 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-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
              <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
            </svg>
            Invoice PDF
          </a>
          <a class="py-2 px-3 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="#">
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2H5zm6 8H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1z" />
              <path d="M0 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2H2a2 2 0 0 1-2-2V7zm2.5 1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
            </svg>
            Print
          </a>
        </div>
        <!-- End Buttons -->

        <div class="mt-5 sm:mt-10">
          <p class="text-sm text-hs2-text-light">If you have any questions, please contact us at <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="#">example@site.com</a> or call at <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="tel:+1898345492">+1 898-34-5492</a></p>
        </div>
      </div>
      <!-- End Body -->
    </div>
  </div>
  <!-- End Invoice -->
</div>

<!-- 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 ">
    <div>
      <h2 class="text-2xl font-semibold text-hs2-primary ">Invoice</h2>
    </div>
    <!-- Col -->

    <div class="inline-flex gap-x-2">
      <a class="py-2 px-3 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-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
          <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
        </svg>
        Invoice PDF
      </a>
      <a class="py-2 px-3 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="#">
        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2H5zm6 8H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1z" />
          <path d="M0 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v2H2a2 2 0 0 1-2-2V7zm2.5 1a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
        </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="grid sm:flex gap-x-3 text-sm">
          <dt class="min-w-[150px] max-w-[200px] text-hs2-text-light">
            Billed to:
          </dt>
          <dd class="text-hs2-text ">
            <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="#">
              sara@site.com
            </a>
          </dd>
        </dl>

        <dl class="grid sm:flex gap-x-3 text-sm">
          <dt class="min-w-[150px] max-w-[200px] text-hs2-text-light">
            Billing details:
          </dt>
          <dd class="font-medium text-hs2-text ">
            <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="grid sm:flex gap-x-3 text-sm">
          <dt class="min-w-[150px] max-w-[200px] text-hs2-text-light">
            Shipping details:
          </dt>
          <dd class="font-medium text-hs2-text ">
            <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="grid sm:flex gap-x-3 text-sm">
          <dt class="min-w-[150px] max-w-[200px] text-hs2-text-light">
            Invoice number:
          </dt>
          <dd class="font-medium text-hs2-text ">
            ADUQ2189H1-0038
          </dd>
        </dl>

        <dl class="grid sm:flex gap-x-3 text-sm">
          <dt class="min-w-[150px] max-w-[200px] text-hs2-text-light">
            Currency:
          </dt>
          <dd class="font-medium text-hs2-text ">
            USD - US Dollar
          </dd>
        </dl>

        <dl class="grid sm:flex gap-x-3 text-sm">
          <dt class="min-w-[150px] max-w-[200px] text-hs2-text-light">
            Due date:
          </dt>
          <dd class="font-medium text-hs2-text ">
            10 Jan 2023
          </dd>
        </dl>

        <dl class="grid sm:flex gap-x-3 text-sm">
          <dt class="min-w-[150px] max-w-[200px] text-hs2-text-light">
            Billing method:
          </dt>
          <dd class="font-medium text-hs2-text ">
            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 ">
    <div class="hidden sm:grid sm:grid-cols-5">
      <div class="sm:col-span-2 text-xs font-medium text-hs2-text-light uppercase">Item</div>
      <div class="text-left text-xs font-medium text-hs2-text-light uppercase">Qty</div>
      <div class="text-left text-xs font-medium text-hs2-text-light uppercase">Rate</div>
      <div class="text-right text-xs font-medium text-hs2-text-light uppercase">Amount</div>
    </div>

    <div class="hidden sm:block border-b border-gray-200 "></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-hs2-text-light uppercase">Item</h5>
        <p class="font-medium text-hs2-text ">Design UX and UI</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Qty</h5>
        <p class="text-hs2-text ">1</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Rate</h5>
        <p class="text-hs2-text ">5</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Amount</h5>
        <p class="sm:text-right text-hs2-text ">$500</p>
      </div>
    </div>

    <div class="sm:hidden border-b border-gray-200 "></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-hs2-text-light uppercase">Item</h5>
        <p class="font-medium text-hs2-text ">Web project</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Qty</h5>
        <p class="text-hs2-text ">1</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Rate</h5>
        <p class="text-hs2-text ">24</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Amount</h5>
        <p class="sm:text-right text-hs2-text ">$1250</p>
      </div>
    </div>

    <div class="sm:hidden border-b border-gray-200 "></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-hs2-text-light uppercase">Item</h5>
        <p class="font-medium text-hs2-text ">SEO</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Qty</h5>
        <p class="text-hs2-text ">1</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Rate</h5>
        <p class="text-hs2-text ">6</p>
      </div>
      <div>
        <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Amount</h5>
        <p class="sm:text-right text-hs2-text ">$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-right 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-hs2-text-light">Subotal:</dt>
          <dd class="col-span-2 font-medium text-hs2-text ">$2750.00</dd>
        </dl>

        <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
          <dt class="col-span-3 text-hs2-text-light">Total:</dt>
          <dd class="col-span-2 font-medium text-hs2-text ">$2750.00</dd>
        </dl>

        <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
          <dt class="col-span-3 text-hs2-text-light">Tax:</dt>
          <dd class="col-span-2 font-medium text-hs2-text ">$39.00</dd>
        </dl>

        <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
          <dt class="col-span-3 text-hs2-text-light">Amount paid:</dt>
          <dd class="col-span-2 font-medium text-hs2-text ">$2789.00</dd>
        </dl>

        <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
          <dt class="col-span-3 text-hs2-text-light">Due balance:</dt>
          <dd class="col-span-2 font-medium text-hs2-text ">$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 ">
      <!-- Grid -->
      <div class="flex justify-between">
        <div>
          <h1 class="mt-2 text-lg md:text-xl font-semibold text-hs2-primary ">HS2</h1>
        </div>
        <!-- Col -->

        <div class="text-right">
          <h2 class="text-2xl md:text-3xl font-semibold text-hs2-text ">Invoice #</h2>
          <span class="mt-1 block text-hs2-text-light">3682303</span>

          <address class="mt-4 not-italic text-hs2-text ">
            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-hs2-text ">Bill to:</h3>
          <h3 class="text-lg font-semibold text-hs2-text ">Sara Williams</h3>
          <address class="mt-2 not-italic text-hs2-text-light">
            280 Suzanne Throughway,<br>
            Breannabury, OR 45801,<br>
            United States<br>
          </address>
        </div>
        <!-- Col -->

        <div class="sm:text-right 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-hs2-text ">Invoice date:</dt>
              <dd class="col-span-2 text-hs2-text-light">03/10/2018</dd>
            </dl>
            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-hs2-text ">Due date:</dt>
              <dd class="col-span-2 text-hs2-text-light">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 ">
          <div class="hidden sm:grid sm:grid-cols-5">
            <div class="sm:col-span-2 text-xs font-medium text-hs2-text-light uppercase">Item</div>
            <div class="text-left text-xs font-medium text-hs2-text-light uppercase">Qty</div>
            <div class="text-left text-xs font-medium text-hs2-text-light uppercase">Rate</div>
            <div class="text-right text-xs font-medium text-hs2-text-light uppercase">Amount</div>
          </div>

          <div class="hidden sm:block border-b border-gray-200 "></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-hs2-text-light uppercase">Item</h5>
              <p class="font-medium text-hs2-text ">Design UX and UI</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Qty</h5>
              <p class="text-hs2-text ">1</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Rate</h5>
              <p class="text-hs2-text ">5</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Amount</h5>
              <p class="sm:text-right text-hs2-text ">$500</p>
            </div>
          </div>

          <div class="sm:hidden border-b border-gray-200 "></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-hs2-text-light uppercase">Item</h5>
              <p class="font-medium text-hs2-text ">Web project</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Qty</h5>
              <p class="text-hs2-text ">1</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Rate</h5>
              <p class="text-hs2-text ">24</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Amount</h5>
              <p class="sm:text-right text-hs2-text ">$1250</p>
            </div>
          </div>

          <div class="sm:hidden border-b border-gray-200 "></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-hs2-text-light uppercase">Item</h5>
              <p class="font-medium text-hs2-text ">SEO</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Qty</h5>
              <p class="text-hs2-text ">1</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Rate</h5>
              <p class="text-hs2-text ">6</p>
            </div>
            <div>
              <h5 class="sm:hidden text-xs font-medium text-hs2-text-light uppercase">Amount</h5>
              <p class="sm:text-right text-hs2-text ">$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-right 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-hs2-text ">Subtotal:</dt>
              <dd class="col-span-2 text-hs2-text-light">$2750.00</dd>
            </dl>

            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-hs2-text ">Total:</dt>
              <dd class="col-span-2 text-hs2-text-light">$2750.00</dd>
            </dl>

            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-hs2-text ">Tax:</dt>
              <dd class="col-span-2 text-hs2-text-light">$39.00</dd>
            </dl>

            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-hs2-text ">Amount paid:</dt>
              <dd class="col-span-2 text-hs2-text-light">$2789.00</dd>
            </dl>

            <dl class="grid sm:grid-cols-5 gap-x-3">
              <dt class="col-span-3 font-semibold text-hs2-text ">Due balance:</dt>
              <dd class="col-span-2 text-hs2-text-light">$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-hs2-text ">Thank you!</h4>
        <p class="text-hs2-text-light">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-hs2-text ">example@site.com</p>
          <p class="block text-sm font-medium text-hs2-text ">+1 (062) 109-9222</p>
        </div>
      </div>

      <p class="mt-5 text-sm text-hs2-text-light">© 2023 High Speed Two.</p>
    </div>
    <!-- End Card -->

    <!-- Buttons -->
    <div class="mt-6 flex justify-end gap-x-3">
      <a class="inline-flex justify-center items-center gap-x-3 text-sm text-center border hover:border-gray-300 shadow-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z" />
          <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z" />
        </svg>
        PDF
      </a>
      <a class="inline-flex justify-center items-center gap-x-3 text-center bg-hs2-primary hover:bg-hs2-primary-600 border border-transparent text-sm text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z" />
          <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z" />
        </svg>
        Print details
      </a>
    </div>
    <!-- End Buttons -->
  </div>
</div>
<!-- End Invoice -->