JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.reverse {
  display: flex;
  flex-direction: column;
}

.reverse .el1 {
  order: 3;
}

.reverse .el2 {
  order: 2;
}

.reverse .el3 {
  order: 1;
}

Babel + JSX

class App extends React.Component {
  state = {
    reverse: false,
  }

  toggle = () => {
    this.setState(({ reverse }) => ({
      reverse: !reverse,
    }))
  }

  render() {
    return (
      <div>
        <button onClick={this.toggle}>click me</button>
        <div className={this.state.reverse ? 'reverse' : ''}>
          <div className="el1">hello, world!!</div>
          <div className="el2">fuck the world</div>
          <div className="el3">fuck everything</div>
        </div>
      </div>
    );
  }
}

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