<button id="button">Open dialog</button>

<div id="modal">
  <form action="">
    <small>Try navigating through inputs using TAB key</small>
    <p>

      <label>
          Username
          <input type="text" id="firstinput" />
        </label>
    </p>
    <p>
      <label>
          Password
          <input type="password" />
        </label>
    </p>
    <p>

      <label><input type="checkbox" />Remember me</label>
    </p>

    <input type="submit" value="Login" />

  </form>
</div>

#modal {
  display: none;
  background-color: rgb(255, 255, 255);
}
#modal.open {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid black;
  padding: 20px;
}
#modal.open:not(:focus-within) {
  background-color: rgb(255, 255, 254);
  transition: background-color 0.01s ease;
}

button.onclick = () => {
  modal.classList.toggle("open");
}

modal.addEventListener('transitionend', (e) => {
  document.querySelector("#firstinput").focus();
});