React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div class="container"></div>

CSS

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #eee;
  margin: 0;
  padding: 0;
}
.tabs {
  margin: 25px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
}
.tabs__labels {
  float: left;
  margin: 0;
  padding: 0;
}
.tabs__labels li {
  display: block;
}
.tabs__labels li a {
  padding: 8px 12px;
  display: block;
  color: #444;
  text-decoration: none;
  border-bottom: 2px solid #f5f5f5;
}
.tabs__labels li a.active {
  border-bottom-color: #337ab7;
}
.tabs__content {
  float: left;
  padding: 25px;
}

JavaScript 1.7

var Tabs = React.createClass({
	displayName: 'Tabs',
	propTypes: {
    selected: React.PropTypes.number,
    children: React.PropTypes.oneOfType([
      React.PropTypes.array,
      React.PropTypes.element
    ]).isRequired
  },
  getDefaultProps: function () {
  	return {
    	selected: 0
    };
  },
  getInitialState: function () {
    return {
    	selected: this.props.selected
    };
  },
  shouldComponentUpdate(nextProps, nextState) {
  	return this.props !== nextProps || this.state !== nextState;
  },
  handleClick: function (index, event) {
  	event.preventDefault();
    this.setState({
    	selected: index
    });
  },
  _renderTitles: function () {
  	function labels(child, index) {
    var isActive = this.state.selected === index;
    	var activeClass = (isActive ? 'active' : '');
 			var content = isActive ? this.props.children[this.state.selected] : null;
 
    	return (
      	<li role="presentation" key={index} className={child.props.liClass}>
        	<a href="#" 
          	className={`sports-tab-header ${activeClass}`}
          	onClick={this.handleClick.bind(this, index)}>
          	<h2>{child.props.label}</h2>
            <p className="sports-subtitle">{child.props.subtitle}</p>
          </a>
          
          <div className="tabs__content">
            {content}
          </div>
          
        </li>
      );
    }
  	return (
    	<ul className="tabs__labels">
      	{this.props.children.map(labels.bind(this))}
      </ul>
    );
  },

	render: function () {
  	return (
    	<div className="tabs sports-tab-container">
        {this._renderTitles()}
      </div>
    );
  }
});

var Pane = React.createClass({
	displayName: 'Pane',
  propTypes: {
    label: React.PropTypes.string.isRequired,
    children: React.PropTypes.element.isRequired
  },
	render: function () {
  	return (
    	<div>
      	{this.props.children}
      </div>
    );
  }
});

var App = React.createClass({
	render: function () {
  	return (
        <Tabs...