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

.hide{
  display:none;
}

.show
{
   display:block;
}
}
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;
      var c1 = this.state.showOne ? "hide" : "show";
      var c2 = this.state.showOne ? "show" : "hide";
      
      
		return (
			<div>
				<div><button onClick={this.onClick}>switch state</button></div>
				<ReactTransitionGroup transitionName="example">
        <div className={c1}>One</div>
        <div className={c2}>Two</div>
				</ReactTransitionGroup>
			</div>
		);
	}
});

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