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>
<div id="container"></div>

CSS

audio, p, button {
  display: block;
}

Babel + JSX

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = { step: 0 };
  }
  
  nextStep() {
    this.setState({ step: this.state.step + 1 });
  }
  
  render() {
    const step = this.state.step;
  	return (
    	<div>
          {step == 0 ? (
            <audio key="wind" controls="controls">
              <source src="http://www.tutorialrepublic.com/examples/audio/birds.mp3" />
            </audio>
          ) : step == 1 ? (
            <audio key="birds" controls="controls">
              <source src="http://www.tutorialrepublic.com/examples/audio/wind.mp3" />
            </audio>
          ) : null}
          <p>{step}</p>
          <button onClick={this.nextStep.bind(this)}>next step</button>
    	</div>
    );
  }
}

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