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

var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
class App extends React.Component {
  state = {
    index: 0
  }
  
  up = () => {
    this.setState(state => ({ index: state.index + 1 }))
  }
  
  down = () => {
    this.setState(state => ({ index: state.index - 1 }))
  }
  
  render() {
  	return (
	    <div>
			  <select value={colors[this.state.index]} onChange={() => {}}>
          {colors.map(color => <option key={color}>{color}</option>)}
        </select>
        <button onClick={this.down}>Previus</button>
        <button onClick={this.up}>Next</button>
      </div>
    )
  }
}

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