JSFiddle - React, Tailwind, and code Playground

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

.ModalBackdrop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

.ModalContent {
    background: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    width: 400px;
}

JavaScript 1.7

/** @jsx React.DOM */

var PortalComponentMixin = {
	componentWillUnmount: function() {
		this._unrenderLayer();
		if(!this.props.portal) document.body.removeChild(this._target);
	},
	componentDidUpdate: function() {
		this._renderLayer();
	},
	componentDidMount: function() {
		if(this.props.portal) {
			this._target = document.getElementById(this.props.portal);
		} else {
			this._target = document.createElement('div');
			document.body.appendChild(this._target);
		}
		this._renderLayer();
	},
	_renderLayer: function() {
		React.renderComponent(this.renderLayer(), this._target);
	},
	_unrenderLayer: function() {
		React.unmountComponentAtNode(this._target);
	},
     render: function() {
        return <span />;
    }
};

var Menu = React.createClass({
	mixins: [
		PortalComponentMixin
	],

    // Note the lack of render method, as that is applied from the mixin. Use `renderLayer` as your replacement.
	renderLayer: function() {
		return (
			<ul>
				{this.props.items.map(function(item) {
					return <li>{item}</li>
				})}
			</ul>
		);
	}
});

var Detail = React.createClass({
	render: function() {
		return (
			<div>
				This is some detail.
				<Menu items={['Item 1 from detail', 'Item 2 from detail']} portal="menu" />
			</div>
		);
	}
});


var App = React.createClass({
	render: function() {
		return (
			<div>
				<h1>My App</h1>
				<span id="menu" />
				<hr />
				{this.props.children}
			</div>
		);
	}
});

React.renderComponent(
	App(null,
		Detail()
	),
	document.body
);