Modal Privacy Info - Tailwind Component

<div class="flex items-center justify-center h-screen">
  <button class="modal-open px-6 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600">
    Demo Modal</button>

    <!-- Modal -->
  <div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
    <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
    <div class="modal-container bg-gradient-to-r from-blue-600 to-blue-700 text-white w-10/12 md:max-w-lg mx-auto rounded shadow-lg z-50 overflow-y-auto">
      <div class="modal-content py-4 text-left px-6">
        <div class="flex justify-between items-center pb-3">
          <p class="text-2xl font-semibold">Privacy Info</p>
          <div class="modal-close cursor-pointer z-50">
            <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
              viewBox="0 0 18 18">
              <path
                d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
              </path>
            </svg>
          </div>
        </div>
        <div class="py-8">
          <p class="text-base">
            The backup created with this export functionnality may conatain some sensitive data. We suggest you to store
            thist archive in a securised location.
          </p>
        </div>
        <div class="flex-row md:flex items-center md:justify-between py-4 text-center">
          <div>
            <a href="#" class="underline text-sm text-gray-200 hover:text-white">Learn more about privacy</a>
          </div>
          <div class="space-x-2 mt-2 md:mt-0">
            <button
              class="modal-close px-4 py-2 bg-blue-900 rounded-lg text-gray-200 font-semibold hover:bg-blue-800 hover:text-gray-100">Cancel</button>
            <button
              class="modal-close px-4 py-2 bg-gray-200 rounded-lg text-blue-700 font-semibold hover:bg-gray-100 hover:text-blue-600">Confirm</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    var openmodal = document.querySelectorAll('.modal-open')
    for (var i = 0; i < openmodal.length; i++) {
      openmodal[i].addEventListener('click', function (event) {
        event.preventDefault()
        toggleModal()
      })
    }

    const overlay = document.querySelector('.modal-overlay')
    overlay.addEventListener('click', toggleModal)

    var closemodal = document.querySelectorAll('.modal-close')
    for (var i = 0; i < closemodal.length; i++) {
      closemodal[i].addEventListener('click', toggleModal)
    }

    function toggleModal() {
      const body = document.querySelector('body')
      const modal = document.querySelector('.modal')
      modal.classList.toggle('opacity-0')
      modal.classList.toggle('pointer-events-none')
      body.classList.toggle('modal-active')
    }
  </script>
</div>