JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="wrap">
  
  </div>
  <script src="https://fb.me/react-with-addons-15.1.0.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.js"></script>
</body>

CSS

.example-enter.example-enter-active{
  border: 50px solid red;
  color: red;
}
.example-appear{
  border: 50px solid blue;
  color: blue
}

Babel + JSX

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var App = React.createClass({
  arr: [1,2,3],
  getInitialState: function(){
  	return{
    	show: true
    }
  },
  clickHandler: function(){
  	this.setState({show: !this.state.show})
  },
  render: function(){
    var items =  this.arr.map(function(item){
      return <h1 key={item}>{item}</h1>
    })
    return(
      <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppear={true} transitionAppearTimeout={500}>
      	{this.state.show ? items : ""}
        <button onClick={this.clickHandler} >button</button>
      </ReactCSSTransitionGroup>
    )
  }
})
ReactDOM.render(
  <App></App>,
  document.getElementById("wrap")
)