JSFiddle - React, Tailwind, and code Playground

by hhcofcmds

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/babel">
var InputRow = React.createClass({
  getInitialState: function() {
    return { value: this.props.value };
  },
  handleInput: function(e) {
    var state = this.state;
    state.value = e.target.value;
    this.setState(state);
  },
  render: function() {
    var inputProps = { type: 'text', className: 'form-control' }
    inputProps.value = this.props.value;
    inputProps.onInput = handleInput;
    var input = (<input {...inputProps}/>);
    return (
      <div className="form-group">
        <label>{this.props.label}</label>
        {input}
      </div>
    );
  }
});
var NameEmail = React.createClass({
  render: function() {
    return (
    <div>
      <InputRow label="Name"/>
      <InputRow label="Email"/>
    </div>
    );
  }
});
ReactDOM.render(
  <NameEmail />,
  document.getElementById('x')
)
</script>
<div id="x">
</div>