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

.fade-appear {
    transition: opacity 4s;
    opacity: 0.01;
}
.fade-appear-active {
    opacity: 1;
}

.fade-enter {
    transition: opacity 4s;
    opacity: 0.01;
}
.fade-enter-active {
    opacity: 1;
}

.red { color: red;}
.green { color: green;    opacity: 0.01; }

JavaScript 1.7

/** @jsx React.DOM */

var ReactTransitionGroup = React.addons.TransitionGroup;

var C = React.createClass({
    getDefaultProps: function() {
        return {changeToGreen: false};
    },
    getInitialState: function() {
        return {class: 'red'};
    },
    render: function() {
        return <div className={this.state.class}>hello, world</div>;
    }
});

var Hello = React.createClass({
    render: function() {
        return <ReactTransitionGroup transitionName="fade" transitionAppear={true} >
            <C />
            <C changeToGreen={true} />
        </ReactTransitionGroup>;
    }
});
 
React.renderComponent(<Hello name="World" />, document.body);