JSFiddle - React, Tailwind, and code Playground

HTML

<style>.modal_hidden{display:none;}</style>
<div class="content">
  <button id="show_modal">Learn more</button>
</div>
<div class="modal modal_hidden">
  <div class="modal_contents">
    <div class="modal_close">
      <span>X</span>
    </div>
    <p>This is modal content</p>
  </div>
</div>

<script>
const toggleModal = () => {
    document.querySelector('.modal')
      .classList.toggle('modal_hidden');
}

document.querySelector('#show_modal')
    .addEventListener('click', toggleModal)

document.querySelector('.modal_close')
    .addEventListener('click', toggleModal)
    </script>