JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16.1.0-beta/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1.0-beta/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Babel + JSX

class App extends React.Component {
  render() {
    return (
      <div>
        <header className='App-header'>
          <h1 className='App-title'>Welcome to React</h1>
        </header>
        <p className='App-intro'>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));