JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
Regular App:
<div id="container"></div>

<hr>

Web Component:
<my-app></my-app>

Babel + JSX

class App extends React.Component {
  render() {
  	return (
    	<div>
    	  <h1>Hello, {this.props.name}</h1>
        <div onClick={() => alert('I have been clicked')}>click me</div>
    	</div>
    );
  }
}

const proto = Object.create(HTMLElement.prototype, {
  attachedCallback: {
    value: function() {
      const mountPoint = document.createElement('span');
      this.createShadowRoot().appendChild(mountPoint);
      ReactDOM.render(<App name="world"/>, mountPoint);
    }
  }
});
document.registerElement('my-app', {prototype: proto});

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