JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<div id="mount"></div>

CSS

.item {
    border: 1px solid grey;
}
#item1 {
    border: 1px solid red;
}
.anim-enter, .anim-leave {
    transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    -moz-transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
}
.anim-enter, .anim-leave.anim-leave-active {
    opacity: 0;
    transform: scale(0.5, 0);
    transform-origin: top left;
    overflow: hidden;
}
.anim-leave, .anim-enter.anim-enter-active {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: top center;
    overflow: hidden;
}

JavaScript

/*
 * React animating example manipulating element height
 * - This is for unknown element height
 * - Not working well when element enter
 */

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var Item = React.createClass({
    displayName: 'Item',
    componentDidMount: function () {
        var id = this.props.label;
        var node = React.findDOMNode(this);

        var style = document.createElement('style');
        style.appendChild(document.createTextNode(''));
        document.head.appendChild(style);

        var sheet = style.sheet;
        sheet.insertRule('#' + id + '.anim-enter, #' + id + '.anim-leave.anim-leave-active { height: 0; }', 0);
        sheet.insertRule('#' + id + '.anim-leave, #' + id + '.anim-enter.anim-enter-active { height: ' + node.scrollHeight + 'px; }', 0);

        this.style = style;
    },
    componentWillUnmount: function () {
        document.head.removeChild(this.style);
    },
    render: function () {
        return React.createElement('div', {
            id: this.props.label,
            className: 'item'
        }, this.props.content);
    }
});

var Group = React.createClass({
    displayName: 'Group',
    getInitialState: function () {
        return {
            isActive: true
        };
    },
    toggleDisplay: function () {
        this.setState(function (state) {
            return {
                isActive: !state.isActive
            };
        });
    },
    render: function () {
        var firstItem = null;
        if (this.state.isActive) {
            firstItem = React.createElement(Item, {
                key: 'item1',
                label: 'item1',
                content: 'foo'
            });
        }
        var secondItem = React.createElement(Item, {
            key: 'item2',
            label: 'item2',
            content: 'bar'
        });
        return React.createElement('div', null,
        React.createElement('button', {
            onClick: this.toggleDisplay
        },...