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

class App extends React.Component {
	static propTypes = {
  	name: PropTypes.string,
  };
  
  state = {
    value: true,
  }
  
  play = () => {
     if (this._interval) return;
     this._interval = setInterval(() => {
       this.setState(({value}) => ({value: !value}));
     }, 500);
  }
  
  stop = () => {
    if (this._interval) {
      clearInterval(this._interval);
      this._interval = null;
    }
  }
  
  render() {
    const {value} = this.state;
  	return (
    	<div data-value={value}>
    	  <h1>Hello, {this.props.name}: {value.toString()}</h1>
        <button onClick={this.play}>Click me to play!</button>
        <button onClick={this.stop}>Stop</button>
        <iframe src="https://example.com/index.html" style={{height: 998, minWidth: "100%"}}></iframe>
    	</div>
    );
  }
}

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