JSFiddle - React, Tailwind, and code Playground

HTML

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

<button id="changeButton">Change the value</button>

<div id="react">React component renders here</div>

CSS

.align-left {
    background: green;
}

.align-right {
    background: yellow;
}

JavaScript 1.7

/** @jsx React.DOM */

var Table = React.createClass({
  render: function() {
    return (
      <div className="row">
        <div className="cell">
          <div className={"align-" + this.props.direction}>
            {this.props.value}
          </div>
        </div>
      </div>
    );
  }
});


function renderValue(value, direction) {
  React.renderComponent(
    <Table value={value} direction={direction} />,
    document.getElementById('react')
  );
}

document.getElementById('changeButton').addEventListener(
  'click',
  renderValue.bind(null, 'Value B.', 'right'),
  false
);

renderValue('Value.', 'left')