JSFiddle - React, Tailwind, and code Playground

by NV

HTML

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

CSS

.group {
  outline: 1px solid hsla(24, 100%, 50%, 0.3);
  background: hsla(34, 100%, 50%, 0.1);
  margin-left: 30px;
}
.group:hover {
  .outline: 2px solid rgb(255, 122, 0);
}

.root {
    margin-left: 0;
}

.item {
  border: 1px solid transparent;
}
.item:hover {
  background: rgba(153,142,195, 0.8);
  border: 1px solid rgb(129, 114, 185);
  position: relative;
  color: white;
}


* {box-sizing: border-box;}
ul {list-style: none; padding-left: 0;}

JavaScript 1.7

/** @jsx React.DOM */

var Tree = React.createClass({
    getInitialState: function() {
        return {
            items: [1, 1, [2, [3, [4]]], 1, 1, 1]
        }
    },
    render: function() {
        var children = this.state.items.map(this.renderItem.bind(this, 0));
        return <ul className="group root">{children}</ul>;
    },
    
    renderItem: function(level, item) {
        if (Array.isArray(item)) {
            var children = item.map(this.renderItem.bind(this, level + 1));
            return <ul className="group">{children}</ul>;
        } else {
            var style = {
                marginLeft: -30 * level,
                paddingLeft: 30 * level
            };
            return <li className="item" style={style}>{item}</li>
        }
    }
});
 
React.renderComponent(<Tree/>, document.body);