JSFiddle - React, Tailwind, and code Playground

by Gregor Z.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.9.0/react.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>
<script src="http://pleasetrythisathome.github.io/bower_components/react.animate/react.animate.js"></script>
<div id="main"></div>

<div id="second"></div>

CSS

.first {
    background: red;
}
.second {
    background: blue;
}

JavaScript

var component = React.createClass({
  mixins: [React.Animate],
  getInitialState: function() {
    return {
      width: 100
    };
  },
  render: function() {
    var heightBounds = [20, 100];

    return React.DOM.div({
      className: this.props.addClass,
      style: {    
        width: this.state.width,
        marginLeft: this.state.width,
        height: Math.min(heightBounds[1], Math.max(heightBounds[0], this.state.width / 2))
      },
      onClick: this.randomSize
    });
  },
  randomSize: function() {
    this.animate({
      width: _.random(20, 300)
    }, 400, function() {
      console.log("random size reached!");
    });
  }
});

React.renderComponent(component({
    addClass: "first"
}), document.getElementById('main'));
React.renderComponent(component({
    addClass: "second"
}), document.getElementById('second'));