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

// the ProseMirror manages its direct children,
// but uses ReactDOM to render some of its children's children
function opaqueRenderProcess(el) {
	el.contentEditable="true";
  const div = document.createElement('div');
  el.appendChild(div);
	ReactDOM.render(<SubComponent />, div);
  // outside libraries which used to rely on ReactDOM.render
  // operating synchronously can no longer do so:
	// e.g. this:
  console.log(el.querySelector('.insertion-point'));
  // is null, which means that external libraries which depends on
  // the DOM being rendered synchronously here can no
  // longer do so
}

class ProseMirror extends React.Component {
	setRef(el) {
  	this.el = el;
  }
	componentDidMount() {
  	opaqueRenderProcess(this.el);
  }
	render() {
    return (<div ref={el => this.setRef(el)} />);
  }
}

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

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