JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
<script src="http://fb.me/react-with-addons-0.5.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.Hello-layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
}

.Hello-header {
    color: white;
}

JavaScript 1.7

/** @jsx React.DOM */

var SimpleLayer = React.createClass({
    componentWillMount: function() {
        this.layerElement = document.createElement('div');
    },
    
    componentDidMount: function() {
        document.body.appendChild(this.layerElement);
        this.rerender();
    },
    
    componentWillUnmount: function() {
        document.body.removeChild(this.layerElement);
    },
    
    componentDidUpdate: function() {
        this.rerender();
    },
    
    rerender: function() {
        // TODO: cloneWithProps()? context?
        React.renderComponent(
            React.DOM.div(this.props, this.props.children),
            this.layerElement
        );
    },
    
    render: function() {
        return <span />;
    }
});

var Hello = React.createClass({
    getInitialState: function() {
        return {layerShown: false};
    },
    
    handleClick: function() {
        this.setState({layerShown: !this.state.layerShown});
    },
    
    render: function() {
        var layer = null;
        if (this.state.layerShown) {
            layer = (
                <SimpleLayer className="Hello-layer" onClick={this.handleClick}>
                    <h1 className="Hello-header">Hello world</h1>
                </SimpleLayer>
            );
        }
        return <div onClick={this.handleClick}>Click meeee{layer}</div>;
    }
});
 
React.renderComponent(<Hello />, document.body);