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>
<div id="tabs_placeholder"></div>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.tabs-panel {
	display: none;
    margin-top: 1em;
}

.tabs-panel_selected {
	display: block;
}

.tab + .tab {
	margin-left: .5em;
}

.tab_selected {
	text-decoration: none;
	color: black;
	font-weight: bold;
}

JavaScript 1.7

/** @jsx React.DOM */

var TabsExample = React.createClass({
	getInitialState: function() {
		return {
			tabs: [
				{title: 'first', content: 'Content 1'},
				{title: 'second', content: 'Content 2'}
			],
			active: 0
		};
	},
	render: function() {
		return <div>
			<TabsSwitcher items={this.state.tabs} active={this.state.active} onTabClick={this.handleTabClick}/>
			<TabsContent items={this.state.tabs} active={this.state.active}/>
		</div>;
	},
	handleTabClick: function(index) {
		this.setState({active: index})
	}
});

var TabsSwitcher = React.createClass({
	render: function() {
		var active = this.props.active;
		var items = this.props.items.map(function(item, index) {
			return <a href="#" className={'tab ' + (active === index ? 'tab_selected' : '')} onClick={this.onClick.bind(this, index)}>
				{item.title}
			</a>;
		}.bind(this));
		return <div>{items}</div>;
	},
	onClick: function(index) {
		this.props.onTabClick(index);
	}
});

var TabsContent = React.createClass({
	render: function() {
		var active = this.props.active;
		var items = this.props.items.map(function(item, index) {
			return <div className={'tabs-panel ' + (active === index ? 'tabs-panel_selected' : '')}>{item.content}</div>;
		});
		return <div>{items}</div>;
	}
});

React.renderComponent(
	<TabsExample/>,
	document.body
);