JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
</p>
<p><button onclick="document.querySelector('dialog').showModal();">Open</button></p>
<dialog>
  <form method="dialog">
    <p>Hello, dialog world.</p>
    <p><button type="submit">Close</button></p>
  </form>
</dialog>
<p>
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
  The quick brown fox jumps over the lazy dog.
</p>

CSS

html {
  padding-block: 70vh;
}
html:has(dialog:modal) {
  overflow: hidden;
}