JSFiddle - React, Tailwind, and code Playground

by Ross Allen

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

li {
    border: 1px solid skyblue;
    display: inline-block;
    list-style: none;
    margin: 0 5px;
    padding: 3px 6px;
}

li.active {
    border-color: yellow;
}

li.active > a {
    text-decoration: none;
}

ul {
    padding: 0;
}

.hidden {
    display: none;
}

JavaScript 1.7

/** @jsx React.DOM */

var Tabbed = React.createClass({
    clickTab: function(tabId) {
        this.setState({activeId: tabId});
    },
    componentDidMount: function() {
        this.props.children.forEach(function(child) {
            child.setState({isActive: (child.props.id === this.state.activeId)});
        }, this);
    },
    componentWillUpdate: function(nextProps, nextState) {
        this.props.children.forEach(function(child) {
            child.setState({isActive: (child.props.id === nextState.activeId)});
        }, this);        
    },
    getInitialState: function() {
        return {
            activeId: this.props.tabs[0].id
        };
    },
    render: function() {
        var tabNodes = this.props.tabs.map(function(tab) {
            var className =
                (this.state.activeId === tab.id) ? "active" : "";

            return (
                <li className={className} key={tab.id}>
                    <a href="#" onClick={this.clickTab.bind(this, tab.id)}>
                      {tab.id}
                    </a>
                </li>
            );
        }, this);

        return (
            <div>
                <ul>{tabNodes}</ul>
                {this.props.children}
            </div>
        );
    }
});

var Pane = React.createClass({
    getInitialState: function() {
        return {
            isActive: false
        };
    },
    render: function() {
        var className = this.state.isActive ? "" : "hidden";

        return (
            <div className={className}>
                {this.props.children}
            </div>
        );
    }
});

var Page = React.createClass({
    clickButton: function() {
        this.setState({message: "Unmount it all"});
    },
    getInitialState: function() {
        return {
            message: "Hi there"
        };
    },
    render: function() {
        return (
            <div>
                <h1>Some tabberific content</h1>
                <Tabbed tabs={[{id: "1st"}, {id:...