JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Modal & z-index</h1>

<button onclick="openModal">Open Modal</button>

<dialog id="modal" class="modal">
  <div class="modal-content">
    <div>Modal Content</div>
  </div>
</dialog>

CSS

.modal {
  z-index: 1055;  
  max-height: 100vh;
  margin-right: auto;
  background-color: #aaf;
  height: fit-content;  
}


.modal::backdrop {
  background-color: #0000008f;
  opacity: 1;
  backdrop-filter: blur(0.375rem);
  height: 100%;
}

JavaScript

function openModal() {
let modalEl = document.getElementById('modal')
modalEl.showModal();
}