JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.cetrez.com/propattr-react.js"></script>
<script src="http://dev.cetrez.com/propattr-react-dom.js"></script>
<script src="http://dev.cetrez.com/propattr-react-dom-server.js"></script>
<!--
<script src="http://dev.cetrez.com/propattr-react-master.js"></script>
<script src="http://dev.cetrez.com/propattr-react-dom-master.js"></script>
<script src="http://dev.cetrez.com/propattr-react-dom-server-master.js"></script>
-->

<div id="container">
</div>

Babel + JSX

class TopLevel extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      index: 0,
    	controlledInputValue: 'start',
      controlledCheckboxChecked: true,
      controlledSelectValue: 'b',
    };
  }
  
  componentDidMount() {
    setInterval(() => {
      this.setState({
      	index: this.state.index + 1
      });
    }, 1000);
  }
  
  render() {
    return (
    	<div>
      	controlled input ({this.state.controlledInputValue})<br />
        <input
        	type="text"
        	value={this.state.controlledInputValue}
          onChange={e => this.setState({controlledInputValue: e.target.value})}
        />
        <hr />
        
        controlled checkbox ({this.state.controlledCheckboxChecked + ''})<br />
        <input
        	type="checkbox"
          checked={this.state.controlledCheckboxChecked}
          onChange={e => this.setState({controlledCheckboxChecked: e.target.checked})}
        />
        <hr />
        
        select ({this.state.controlledSelectValue})<br />
        <select
        	value={this.state.controlledSelectValue}
          onChange={e => this.setState({controlledSelectValue: e.target.value})}>
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="c">C</option>
        </select>
        <hr />
                
        progress ({(this.state.index % 4) === 0 ? 'null' : this.state.index % 4})<br />
        <progress
        	value={(this.state.index % 4) === 0 ? null : this.state.index % 4}
          min={0}
          max={3}
        />
        <hr />
        
        href ({(this.state.index % 4) === 0 ? 'null' : "#" + this.state.index % 4})<br />
        <a href={(this.state.index % 4) === 0 ? null : "#" + this.state.index % 4}>
        	TEST LINK
        </a>
        <hr />
      </div>
    );
  }
}

console.log(ReactDOMServer.renderToStaticMarkup(<TopLevel />));

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