I am using tailwind css for styles. Below is the html file.

HTML File

//modal 1
 <div
    class="modal fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50 "
  >
    <div class="modal-container absolute flex min-w-full lg:px-8 xl:px-24">
      <div
        class="modal-info bg-white min-w-full lg:w-8/12 lg:rounded-lg overflow-y-scroll p-0 relative"
      ></div>
//modal 2
      <div
         class="modal fixed top-0 left-0 bottom-0 right-0 bg-black bg-opacity-40 z-50"
         >
        <div
          class="absolute center bg-white w-4/5 landscape:w-2/5 lg:auto rounded-lg px-6 py-4 lg:py-8 text-center"
          ></div>
       </div>
      <a
        href="#"
        class="modal-close hidden md:block ml-4 lg:-ml-4 lg:-mt-4 xl:ml-4 xl:mt-0 relative z-50"
        ><svg
          width="35"
          height="35"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          ><rect width="35" height="35" rx="5" fill="#fff" />
          <path
            d="M11.293 11.293a1 1 0 011.414 0L18 16.586l5.293-5.293a1 1 0 011.414 1.414L19.414 18l5.293 5.293a1 1 0 01-1.414 1.414L18 19.414l-5.293 5.293a1 1 0 01-1.414-1.414L16.586 18l-5.293-5.293a1 1 0 010-1.414z"
            fill="#0D0D0D"
          /></svg
        ></a
      >
    </div>
</div>

When I am trying to display the above html, Modal 2 is not covering the entire screen and modal close tag is still clickable.