JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/tailwindcss@next/dist/tailwind.min.css">
<div class="flex items-center justify-center h-64">
  <button class="modal-button bg-teal-200 p-3 rounded-lg text-teal-900 hover:bg-teal-300">
    Blast off
  </button>
</div>
<div class="modal opacity-0 pointer-events-none absolute w-full h-full top-0 left-0 flex items-center justify-center">
  <div class="modal-overlay absolute w-full h-full bg-black opacity-25 top-0 left-0 cursor-pointer"></div>
  <div class="absolute w-1/2 h-32 bg-white rounded-sm shadow-lg flex items-center justify-center text-2xl">
    🚀
  </div>
</div>

CSS

.modal {
  transition: opacity 0.25s ease;
}

JavaScript

const button = document.querySelector('.modal-button')
button.addEventListener('click', toggleModal)

const overlay = document.querySelector('.modal-overlay')
overlay.addEventListener('click', toggleModal)


function toggleModal () {
	const modal = document.querySelector('.modal')
  modal.classList.toggle('opacity-0')
  modal.classList.toggle('pointer-events-none')
}