JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/prop-types@15.5.10/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>
<div id="container"></div>

Babel + JSX

const SubComponent = () => (
	<div contentEditable={false}>Subcomponent
    <div className="insertion-point"></div>
  </div>
 );

function opaqueRenderProcess(el, innerDiv) {
	el.contentEditable="true";
  el.appendChild(innerDiv);
  console.log(el.querySelector('.insertion-point'));
}

class ProseMirror extends React.Component {
	innerDiv = document.createElement('innerDiv');
	setRef(el) {
  	this.el = el;
  }
	componentDidMount() {
  	opaqueRenderProcess(this.el, this.innerDiv);
  }
	render() {
    return (
    	<React.Fragment>
      	<div ref={el => this.setRef(el)} />
        {ReactDOM.createPortal(
        	<SubComponent />,
        	this.innerDiv
        )}
      </React.Fragment>
    );
  }
}

class App extends React.Component {
  render() {
  	return (
    	<div>
    	  <ProseMirror />
    	</div>
    );
  }
}

ReactDOM.render(<App name="world"/>, document.getElementById('container'));