JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

CSS

body {
  margin: 0;
  height: 100vh;
}

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.modal-body {
  background: white;
  border: 1px solid black;
  padding: 5px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
}

Babel + JSX

const Modal = ({ close, header, children }) => (
  <div
    className="modal-overlay"
    onClick={e => (e.currentTarget === e.target) && close()}
  >
    <div className="modal-body">
      <div className="modal-header">
        <div className="modal-header-content">{header}</div>
        <button className="modal-close" onClick={close}>x</button>
      </div>
      <div className="modal-content">
        {children}
      </div>
    </div>
  </div>
);


const App = () => {
  const [ modal, setModal ] = React.useState(false);

  return (
    <div>
      <button onClick={() => setModal(true)}>click me</button>
      {modal
        ? <Modal close={() => setModal(false)}>
            <p>hello, world!!</p>
            <p>fuck the world</p>
            <p>fuck everything</p>
          </Modal>
        : null}
    </div>
  );
}


ReactDOM.render(<App />, document.getElementById('app'));