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 Test = React.createClass({
  getInitialState: function() {
    return {showOne:true}
  },
  onClick: function() {
    this.setState({showOne:! this.state.showOne});
  },
	render: function() {
	  var result;
      if (this.state.showOne)
      {
        result = <div>One</div>
      }
      else 
      {
        result = <div>Two</div>
      }
      
		return (
			<div>
				<div><button onClick={this.onClick}>switch state</button></div>
				<ReactTransitionGroup transitionName="example">
					{result}
				</ReactTransitionGroup>
			</div>
		);
	}
});

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