JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input type="submit" id="BtReg" value="open">
  <input type="submit" class="close" value="close">
  <div class="modal">modal</div>
</form>

CSS

.modal {
  display: none;

  width: 50px;
  height: 50px;
  background: blue;
}

.open {
  display: flex !important;
}

JavaScript

window.onload = function () {
  const BtReg = document.querySelector("#BtReg");
  const close = document.querySelector(".close");
  const modal = document.querySelector(".modal");

  BtReg.addEventListener('click', function (event) {
    event.preventDefault();
    modal.classList.add("open");
  });

  close.addEventListener('click', function (event) {
    event.preventDefault();
    modal.classList.remove("open");
  });
}