JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<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>
<!-- Test html that is hosted in the iframe:
  this runs on a different server than the component below -->
<script>
    function processMsg(event) {
        let banner = document.getElementById("welcomeBanner")
        banner.innerHTML = "Welcome " + event.data + "!"
    }
    window.addEventListener("message", processMsg, false);
</script>

<div class="text-center">
    <h1 class="display-4" id="welcomeBanner"> Welcome </h1>
    <p>This is meant to be hosted in an iframe</p>

</div>

Babel + JSX

const EmbeddedApp = (props) => {


  const {user, installation} = useContext(UserContext);
  let sourceURL = getURL() // simplified for readability

  const iframeRef = useRef(null)

  useEffect(() => {
    iframeRef.current.contentWindow.postMessage(user.name, "*")
  }, [user])

  return (
    sourceURL ? 
    <iframe src={sourceURL} height="100%" title="Embedded site" width="100%" frameBorder="0" ref={iframeRef}/> :
    <Alert severity="warning">Unable to find configuration for this application</Alert>
  );
}