JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.button {
  color: red;
}

Babel + JSX

class Button extends React.Component {
	
  constructor() {
  	super();
    this.state = {counter: 0}; //initialize your state
    //give your onClick function acces to "this"
    this._onClick = this._onClick.bind(this);
  }
  
  //Bad way, but I can't get JSFiddle to recognize arrow functions!
  //See slides for the correct way
	_onClick() {
  	this.setState({counter: this.state.counter + 1});
  }

  
  render() {
    return <div>
      <button className="button" onClick={this._onClick}>Click Me!</button>
      <h1>{this.state.counter}</h1>
    </div>;
  }
}

ReactDOM.render(
  <Button/>,
  document.getElementById('container')
);