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://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the links inside the tab */
div.tab a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
div.tab a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

JavaScript 1.7

var Form = React.createClass({
	render: function() {
  	return (
    <div id={this.props.name} className="tabcontent">
  		<h3>{this.props.name}</h3>
  		<p>{this.props.name} form elements</p>
		</div>
    );
  }
});

var Tab = React.createClass({
	openForm: function(evt){
  	
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(this.props.name).style.display = "block";
    evt.currentTarget.className += " active";

  },
  
  render: function() {
  	return (
    <div>
    <div>
   	 
      <a href="javascript:void(0)" className="tablinks" onClick={this.openForm}>{this.props.name}</a>
    </div>
    
    	<Form name={this.props.name} />
    
    </div>
   );
  }
});

var TabSet = React.createClass({
	getInitialState: function(){
  
  var stateValues = this.props.tabs.slice();
  for(var x = 0; x < stateValues.length; x++){
  	stateValues[x].active = stateValues[x].active || false;
  }
  
  return {
  	tabs: stateValues
  }
  
  },
  render: function(){
  
  var x = -1;
  var mappedTabs = this.state.tabs.map(function(data,key){
  x++;
  return (
  <Tab name={data.name} />
  );
  	
  });
  
  return (
  	<div className="tab">
    	{mappedTabs}
    </div>
  );
  }
});

var tabs = [
{
	name: "tab1",
  parts: [
  				{label: "field1", type: "type1"},
          {label: "field2", type: "type2"}
  ]
},
{
	name: "tab2",
  parts: [
  				{label: "field3", type: "type1"},
          {label: "field4", type: "type2"}
  ]
}];


ReactDOM.render(
  <TabSet tabs={tabs}/>,
  document.getElementById('container')
);