Feedback Modal

                                        <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-3" data-modal-target="modalBox-3" data-modal-toggle="modalBox-3">
          Ask a Questions
        </button>
        <div id="modalBox-3"
          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="bg-white p-6">
              <div class="flex flex-col gap-5">
                <h4 class="text-lg font-bold leading-8 text-gray-900 text-center">Ask a Questions</h4>
                <form action="#" class="flex flex-col gap-4">
                  <div class="relative">
                    <label class="flex  items-center mb-1 text-gray-600 text-xs font-medium">Add a Title</label>
                    <input type="text" id="default-search"
                      class="block w-full  pl-4 pr-3.5 py-2.5 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-200 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed"
                      placeholder="Add your title" required="">
                  </div>

                  <div class="relative">
                    <label class="flex  items-center mb-1 text-gray-600 text-xs font-medium">What are details of your problem? </label>
                    <textarea id="problem-1"
                      class="block w-full  h-24 px-3.5 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-200 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed resize-none"
                      placeholder="Enter the details of your problem..."></textarea>
                  </div>

                  <div class="relative">
                    <label class="flex  items-center mb-1 text-gray-600 text-xs font-medium">What did you try and what were you expecting?</label>
                    <textarea id="problem-2"
                      class="block w-full h-24 px-3.5 py-2 text-sm font-normal shadow-xs text-gray-900 bg-transparent border border-gray-200 rounded-lg placeholder-gray-400 focus:outline-none leading-relaxed resize-none"
                      placeholder="Enter the details of your problem..."></textarea>
                  </div>
                </form>
                <div class="flex items-center justify-end gap-4">
                  <button class="py-2.5 px-9 rounded-lg border border-gray-200 text-sm font-medium text-gray-900 transition-all duration-300 hover:bg-gray-100 hover:border-gray-100 close-modal-button"  data-pd-overlay="#modalBox-3" data-modal-target="modalBox-3">Cancel</button>
                  <button class="py-2.5 px-9 rounded-lg text-sm font-medium text-white bg-green-700 transition-all duration-300 hover:bg-green-800 close-modal-button"  data-pd-overlay="#modalBox-3" data-modal-target="modalBox-3">Submit</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>