JSFiddle - React, Tailwind, and code Playground

by Sergey Kosterin

HTML

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

CSS

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

JavaScript

var MainV = React.createClass({
    
    
    
    getDefaultProps: function(){
        return {
            rows: null
        }
    },
    
    
    
    getInitialState: function(){
        return {
            
        }
    },
    
    
    
    render: function(){
        return React.DOM.div({
            className: 'root'
        },
            _.map(this.props.rows, function(row){
                return React.DOM.div({
                    className: 'box',
                    style: {
                        backgroundColor: row.value
                    }
                })
            })
        )
    }
    
    
    
})


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);