JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

span {
	margin: 2px;
	border: 1px solid gray;
	padding: 4px;
	background-color: yellow;
	font-size: 40px;
}

.example-enter {
	opacity: 0.01;
	transition: opacity .5s ease-in;
	-webkit-transition: opacity .5s ease-in;
}
.example-enter.example-enter-active {
	opacity: 1;
}

.example-leave {
	opacity: 1;
	transition: opacity .5s ease-in;
	-webkit-transition: opacity .5s ease-in;
}
.example-leave.example-leave-active {
	opacity: 0.01;
}

JavaScript 1.7

/** @jsx React.DOM */

var ReactTransitionGroup = React.addons.TransitionGroup;

var TodoList = React.createClass({
  getInitialState: function() {
    return {items: ['hello', 'world', 'click', 'me']};
  },
  handleAdd: function() {
    var newItems =
      this.state.items.concat([prompt('Enter some text')]);
    this.setState({items: newItems});
  },
  handleRemove: function(i) {
    var newItems = this.state.items;
    newItems.splice(i, 1)
    this.setState({items: newItems});
	},
	
	render: function() {
		var items = this.state.items.map(function(item, i) {
			return (
				<div key={item} onClick={this.handleRemove.bind(this, i)}>
					{item}
				</div>
			);
		}.bind(this));
		
		return (
			<div>
				<div><button onClick={this.handleAdd} /></div>
				<ReactTransitionGroup transitionName="example">
					{items}
				</ReactTransitionGroup>
			</div>
		);
	}
});

var app = React.renderComponent(<TodoList />, document.body);