JSFiddle - React, Tailwind, and code Playground

by Mingtao Sun

HTML

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

Babel + JSX

class App extends React.Component {
	constructor(props){
  	super(props);
    this.state = {
    	name: props.name
    };
  }
  
  changeName = () => {
    this.setState({
    	name: 'Anna'
    });
  }
  
  render(){
  	return (
    	<div>
        <p>{this.state.name}</p>
        <button id="btn" onClick={this.changeName}>Change name</button>
      </div>
    );
  }
}

ReactDOM.render(<App name="smt"/>, document.querySelector('#app'));