JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>

CSS

.box {
  width: 50px;
  height: 50px;
  background-color: black;
}

.selected {
  opacity: 1;
}

.unselected {
  opacity: 0.5;
}

JavaScript

var MainV = React.createClass({

  getDefaultProps: function() {
    return {
      rows: null
    }
  },

  getInitialState: function() {
    return {
    	selected: false
    }
  },

  render: function() {
    return React.DOM.div({
        className: 'root'
      },
      _.map(this.props.rows, function(row) {
        return new ItemRendererV(row);
      })
    )
  }

})

var ItemRendererV = React.createClass({

  getDefaultProps: function() {
    return {
      color: null,
      value: null
    }
  },

  render: function() {
    return React.DOM.div({
      className: 'box' + (this.state.selected ? 'selected' : 'unselected'),
      onClick: function(){this.setState({selected : ! this.state.selected})}.bind(this),
      style: {
        backgroundColor: this.props.value
      }
    }, this.props.color)
  }
})

var getData = function getData() {
  return [{
    color: "red",
    value: "#f00"
  }, {
    color: "green",
    value: "#0f0"
  }, {
    color: "blue",
    value: "#00f"
  }, {
    color: "cyan",
    value: "#0ff"
  }, {
    color: "magenta",
    value: "#f0f"
  }, {
    color: "yellow",
    value: "#ff0"
  }, {
    color: "black",
    value: "#000"
  }]
}
var rows = getData();
var mainV = new MainV({
  rows: rows
});
React.renderComponent(mainV, document.body);