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;
    height: 40px;
    padding: 12px;
    margin: 16px;
}
#item1 {
    border: 1px solid red;
}
.anim-enter, .anim-leave {
    transition: height 350ms ease-out;
    overflow: hidden;
}
.anim-enter, .anim-leave.anim-leave-active {
    opacity: 0;
    transform: scale(0.5, 0);
    transform-origin: top left;
}
.anim-leave, .anim-enter.anim-enter-active {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: top center;
}

JavaScript

/*
 * React animating element height using TransitionGroup only
 */

var ReactTransitionGroup = React.addons.TransitionGroup;

var TICK = 17;

var AnimateCSSHeightMixin = {
    componentWillMount: function () {
        var style = document.createElement('style');
        style.appendChild(document.createTextNode(''));
        document.head.appendChild(style);

        var sheet = style.sheet;
        sheet.insertRule('#' + this.props.label + '.anim-enter, #' + this.props.label + '.anim-leave.anim-leave-active { height: 0; margin: 0; padding: 0; }', 0);

        this.style = style;
        this.sheet = sheet;
    },
    componentWillEnter: function (done) {
        var node = React.findDOMNode(this);
        var sheet = this.sheet;

        var computedStyle = window.getComputedStyle(node, null);

        var directions = ['Top', 'Right', 'Bottom', 'Left'];
        var margin = directions.map(function (direction) {
            return computedStyle['margin' + direction];
        }).join(' ');
        var padding = directions.map(function (direction) {
            return computedStyle['padding' + direction];
        }).join(' ');

        sheet.insertRule('#' + this.props.label + '.anim-enter.anim-enter-active { height: ' + computedStyle.height + '; margin: ' + margin + '; padding: ' + padding + '; }', 1);
        sheet.insertRule('#' + this.props.label + ' { display: none; }', 2);

        setTimeout(function () {
            node.classList.add('anim-enter');
            sheet.deleteRule(2);
            setTimeout(function () {
                node.classList.add('anim-enter-active');
                setTimeout(done, 350);
            }, TICK);
        });
    },
    componentDidEnter: function () {
        var node = React.findDOMNode(this);
        node.classList.remove('anim-enter');
        node.classList.remove('anim-enter-active');
        this.sheet.deleteRule(1);
    },
    componentWillLeave: function (done) {
        var node = React.findDOMNode(this);
   ...