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-body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 20px;
  background: #eee;
  border: 1px solid black;
  padding: 5px;
  display: inline-block;
}

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

Babel + JSX

const Modal = ({ close, header, children }) => {
  const root = React.useRef();

  React.useEffect(() => {
    const onClick = e => root.current.contains(e.target) || close();
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div className="modal-body" ref={root}>
      <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>
  );
}


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'));