JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.dude-table {
  background: rgba(50,50,50,.2);
}
.dude {
  font-size: 36pt;
  padding: 20px;
  font-weight: bold;
}
.dude-happy {
  color: green;
}
.dude-not-so-happy {
  color: orange;
}
.dude-upset {
  color: red;
}
.table-demo-head {
  background: rgba(200,50,50,.5);
}
.table-demo-body {
  background: rgba(50,50,200,.1);
}
.table-demo-span {
  font-size: 24pt;
  padding: 20px;
}
.toggle-button {
  font-size: 24pt;
  padding: 20px;
  margin-bottom: 20px;
}

JavaScript 1.7

var Else = React.createClass({  
  render: function () {
    return null;
  }
});

var If = React.createClass({
  render: function () {
    var cond = this.props.cond;
    var output = this.props.children.reduce(function (agg, inp) {
      if (cond && !agg.elseFound) {
        agg.children.push(inp);
      } else if (!cond && agg.elseFound) {
        agg.children.push(inp);
      }
      if (inp.hasOwnProperty('type') && inp.type.displayName === 'Else') {
        if (!cond) {
          agg.className = inp.props.className;
        }
        agg.elseFound = true;
      }
      return agg;
    }, {
      className: this.props.className,
      children: [],
      elseFound: false
    });
    
    return (
      <div className={output.className}>
        {output.children}
      </div>
    );
  }
});

function getConvertStringToElements(delimiter) {
  return function (string, constructor) {
    return string.split(delimiter).map(function (a, i) {
      return constructor(
        <span className="table-demo-span">{a}</span>,
        i
      );
    });
  }
}

function thConstructor(a, i) {
  return (<th key={i}>{a}</th>);
}

function tdConstructor(a, i) {
  return (<td key={i}>{a}</td>);
}

var TableDemo = React.createClass({
  render: function () {
    var headerFirst = this.props.headerFirst;
    var convertStringToElements = getConvertStringToElements(this.props.delimiter);
    var output = this.props.data.reduce(function (agg, inp, i) {
      if (headerFirst && i === 0) {
        agg.header.push(
          <tr key={i}>
            {convertStringToElements(inp, thConstructor)}
          </tr>
        );
      } else {
        agg.rows.push(
          <tr key={i}>
            {convertStringToElements(inp, tdConstructor)}
          </tr>
        );
      }
      return agg;
    }, {
      header: [],
      rows: []
    });
    return (
      <table className="table-demo-table">
        <thead className="table-demo-head">
          {output.header}
        </thead>
     ...