JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css">
<script src="http://fb.me/react-0.10.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

body {
    padding: 20px;
}

.box {
    border: 1px solid #555;
    margin: 2px;
}

h5 {
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 3px;
}

.text {
    font-size: 11px;
    font-weight: 300;
    padding: 3px;
}

.search {
    padding: 3px;    
}

label {
    font-size: 11px;
    font-weight: normal;
    padding-right: 3px;
}

JavaScript 1.7

/** @jsx React.DOM */

var Search = React.createClass({
    setText: function(e) {
        e.preventDefault();
        this.props.onSubmit(this.refs.searchText.getDOMNode().value);
    },
    
    render: function() {
        console.log("Search: render pass");
        return (
            <div className="search">
                <label for="r-filter">Search</label>
                <input type="text" value={this.props.searchText} ref="searchText" />
                <button onClick={this.setText}>Search</button>
            </div>
        );
    }
});
            

var Section = React.createClass({
  render: function() {
        console.log("Section: render pass");
        var childrenComp = [];
        this.props.children.forEach(function(child, i) {
            childrenComp.push(child);
        });
                
        return (
          <div className="box">
            <h5>Section</h5>
            <div>
                {childrenComp}
            </div>
          </div>
        );
  }
});

var Widget = React.createClass({
  render: function() {
      console.log("Widget: render pass");
      return (
        <div className="box">
          <h5>Widget</h5>
          <div className="text">This is a widget content.</div>
        </div>
      );
  }
});

var Chart = React.createClass({
  render: function() {
      console.log("Chart: render pass");
      return (
        <div className="box">
          <h5>Chart</h5>
          <div className="text">This is a chart!</div>
        </div>
      );
  }
});


var Dashboard = React.createClass({
  getInitialState: function() {
      return {
          filterText: ''
      }
  },

  handleUserInput: function(filterText) {
    this.setState({filterText: filterText});
  },

  render: function() {
        console.log("Dashboard: render pass");
        return (
          <div className="box">
            <h5>Dashboard</h5>
            <Search onSubmit={this.handleUserInput} />
            {this.props.children}
         ...