JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="switch"></div>

CSS

.button {
    display: block;
    height: 100px;
    width: 100px;
    border: 1px solid #aaa;
    border-radius: 25px;
    font: bold 20px Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    color: #fff;
    background-color: #000;
    /* Define transition on the "opacity" property. */    
    transition: opacity 0.5s ease-in;
}
.button.on {
    color: #00FF00;
    background-color: #006600;
}

.switch-enter {
    opacity: 0.01;
}
.switch-enter.switch-enter-active {
    opacity: 1.0;
}
.switch-leave {
    /* Completely hide the button while it's being animated and before it's removed from the DOM. 
    visibility: hidden;
    height: 0px;
    width: 0px;
    */
    /* Starting opacity */
    opacity: 1.0;
}
.switch-leave.switch-leave-active {
    /* Ending opacity: 
    Trigger opacity change so the "transitionend" event will fire, causing React to remove from the DOM. */
    opacity: 0;
}

JavaScript 1.7

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var Switch = React.createClass({
    getInitialState: function() {
        return {
            on: false
        };
    },
    toggle: function(e) {
        this.setState({on: !this.state.on});
    },
    text: function() {
    if (this.state.on) {
    return (
    <div>ON</div> 
    )
    } else {
    return (
    <div>OFF</div>
    )
    }
    },
    render: function() {
        var key = this.state.on ? 'ON' : 'OFF';
        var className = this.state.on ? "on" : "";
        className += " button"

        return (
            <div>
        	  <button onClick={this.toggle}>Toggle</button>
              <ReactCSSTransitionGroup transitionName="switch">
                <div key={key} className={className}>{this.text()}</div>
              </ReactCSSTransitionGroup>
            </div>
        );
            
    }
});

React.render(<Switch/>, document.getElementById("switch"));