JSFiddle - React, Tailwind, and code Playground

HTML

<button class="open">open</button>

<div class="modal">
  <button class="close">close</button>
</div>

CSS

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  
  visibility: hidden;
  opacity: 0%;
}

.modal--show {
  animation: show 0.5s both;
  visibility: visible;
}

@keyframes show {
  0% {
    visibility: hidden;
    opacity: 0%;
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 100%;
  }
}

JavaScript

document.querySelector('.open').addEventListener('click', () => {
  document.querySelector('.modal').classList.add('modal--show');
});

document.querySelector('.close').addEventListener('click', () => {
  document.querySelector('.modal').classList.remove('modal--show');
});