JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.FadeInWhenAdded {
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.FadeInWhenAddedShown {
    opacity: 0.99;
}

JavaScript 1.7

/** @jsx React.DOM */

// Just wrap your component in this guy and it will fade in when added.
var FadeInWhenAdded = React.createClass({
    getInitialState: function() {
        return {shown: false};
    },
    toggle: React.autoBind(function() {
        this.setState({shown: !this.state.shown});
    }),
    componentDidMount: function() {
        setTimeout(this.toggle, 0);
    },
    render: function() {
        var classes = 'FadeInWhenAdded';
        if (this.state.shown || this.props.doNotAnimate) {
            classes += ' FadeInWhenAddedShown';
        }
        return this.transferPropsTo(
            <div class={classes}>
                {this.props.children}
            </div>
        );
    }
});

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <FadeInWhenAdded><li>{itemText}</li></FadeInWhenAdded>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});

var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onKey: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit.bind(this)}>
          <input onKeyUp={this.onKey.bind(this)} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});

React.renderComponent(<TodoApp />, document.body);