Modal with Link Sharing

                                        <section class="relative py-8 sm:p-8">
    <div class="w-full max-w-7xl mx-auto px-4 lg:px-8 xl:px-14 relative">

      <div class="w-full relative flex justify-center">
        <button type="button"
          class="modal-button py-2.5 px-5 text-xs bg-indigo-600 text-white rounded-full cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700"
          data-pd-overlay="#modalBox-2" data-modal-target="modalBox-2" data-modal-toggle="modalBox-2">
          Share Blog
        </button>
        <div id="modalBox-2"
          class="pd-overlay  w-full h-full fixed top-0 left-0 z-[100000] overflow-x-hidden overflow-y-auto">
          <div
            class="opacity-1 ease-out sm:max-w-sm sm:w-full m-5 relative top-1/2 -translate-y-1/2 sm:mx-auto modal-open:opacity-100 transition-all modal-open:duration-500">
            <div class="flex items-start bg-white p-6">

              <div class="block">
                <div class="flex items-center justify-between mb-1">
                  <h6 class="text-lg font-bold leading-8 text-gray-900 ">Blog Post Published</h6>
                  <button type="button"
                    class="close-modal-button text-indigo-300 transition-all duration-300 hover:text-indigo-600"
                    data-pd-overlay="#modalBox-2" data-modal-target="modalBox-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                      <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M2.20007 11.9998C2.20007 6.58741 6.58768 2.1998 12.0001 2.1998C17.4125 2.1998 21.8001 6.58741 21.8001 11.9998C21.8001 17.4122 17.4125 21.7998 12.0001 21.7998C6.58768 21.7998 2.20007 17.4122 2.20007 11.9998ZM15.5658 9.56529C15.8782 9.25287 15.8782 8.74634 15.5658 8.43392C15.2534 8.1215 14.7469 8.1215 14.4344 8.43392L12.0001 10.8682L9.56581 8.43392C9.25339 8.1215 8.74686 8.1215 8.43444 8.43392C8.12202 8.74634 8.12202 9.25287 8.43444 9.56529L10.8688 11.9996L8.43444 14.4339C8.12202 14.7463 8.12202 15.2529 8.43444 15.5653C8.74686 15.8777 9.25339 15.8777 9.56581 15.5653L12.0001 13.131L14.4344 15.5653C14.7469 15.8777 15.2534 15.8777 15.5658 15.5653C15.8782 15.2529 15.8782 14.7463 15.5658 14.4339L13.1315 11.9996L15.5658 9.56529Z"
                        fill="currentcolor" />
                    </svg>
                  </button>
                </div>
                <p class="text-xs font-normal text-gray-500 mb-7">
                  This blog post is now live. Team members can edit and republish any changes.
                </p>
                <div class="">
                  <p class="text-xs font-medium text-gray-600">Share link</p>
                  <div class="flex items-center gap-4">
                    <input type="text" class="p-2 pl-3 w-full rounded-lg border border-gray-300 placeholder:text-gray-400 text-xs font-normal" placeholder="www.pagedone.io / blog" />
                    <button class="py-2 pr-3 pl-1.5 rounded-md flex items-center gap-1.5 text-xs font-medium text-indigo-600 bg-indigo-50 transition-all duration-300 hover:bg-indigo-100">
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M6 10C4.11438 10 3.17157 10 2.58579 9.41421C2 8.82843 2 7.88562 2 6C2 4.11438 2 3.17157 2.58579 2.58579C3.17157 2 4.11438 2 6 2C7.88562 2 8.82843 2 9.41421 2.58579C10 3.17157 10 4.11438 10 6M6 10C7.88562 10 8.82843 10 9.41421 9.41421C10 8.82843 10 7.88562 10 6M6 10C6 11.8856 6 12.8284 6.58579 13.4142C7.17157 14 8.11438 14 10 14C11.8856 14 12.8284 14 13.4142 13.4142C14 12.8284 14 11.8856 14 10C14 8.11438 14 7.17157 13.4142 6.58579C12.8284 6 11.8856 6 10 6" stroke="#4F46E5" stroke-width="1.6"/>
                      </svg>Copy
                    </button>
                  </div>
                </div>
                <div class="flex items-center pt-5 gap-4">
                  <button type="button"
                    class="w-full text-center p-1.5 py-2 border border-gray-200 rounded-md text-xs font-medium text-gray-900 close-modal-button transition-all duration-300 hover:bg-gray-100 hover:border-gray-100"
                    data-pd-overlay="#modalBox-2" data-modal-target="modalBox-2">
                    Cancel
                  </button>
                  <button type="button"
                    class="w-full text-center p-1.5 py-2 rounded-md bg-indigo-600 text-white text-xs font-medium close-modal-button transition-all duration-300 hover:bg-indigo-700"
                    data-pd-overlay="#modalBox-2" data-modal-target="modalBox-2">
                    Confirm
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="backdrop" class="fixed top-0 left-0 w-full h-full bg-black/50 z-[50]">
        </div>
      </div>
    </div>
  </section>