JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react@15/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var TextBoxList = React.createClass({
  getInitialState: function() {
    return {count: 1};
  },
  add: function() {
    this.setState({count: this.state.count + 1});
  },
  render: function() {
    var items = [];
    for (var i = 0; i < this.state.count; i++) {
      items.push(
        <li key={i}>
          <input type="text" placeholder="change me!" />
        </li>
      );
    }
    return (
      <ul>
        {items}
        <input type="button" value="Add an item" onClick={this.add} />
      </ul>
    );
  }
});
 
ReactDOM.render(
  <div>
    <p>Every time you add a new text box to the list, we "re-render" the whole list, but any text entered in the text boxes is left untouched because React is smart enough to just append the new text box instead of blowing away the old DOM nodes.</p>
    <TextBoxList />
  </div>,
  document.getElementById('container') 
);