JSFiddle - React, Tailwind, and code Playground

by Elak

HTML

<section class="trees"></section>

CSS

.trees { padding:0 10px;}
    .tree-group-avg {margin:0 8px; display:inline-block;}
    .tree-group-avg div {position:relative; display:inline-block; margin:0 10px 0 0; background:#83919F; width:2px; vertical-align:bottom;}
    .tree-group-avg .large-tree { height:120px; }
    .tree-group-avg .avg-tree { height:90px;}
    .tree-group-avg .small-tree { height:60px;}
    
    .tree-group-large {margin:0 8px;  display:inline-block;}
    .tree-group-large div {position:relative; display:inline-block; margin:0 10px 0 0; background:#83919F; width:2px; vertical-align:bottom;}
    .tree-group-large .large-tree { height:150px; }
    .tree-group-large .avg-tree { height:120px;}
    .tree-group-large .small-tree { height:90px;}
    
    .tree-group-small {margin:0 8px;  display:inline-block;}
    .tree-group-small div {position:relative; display:inline-block; margin:0 10px 0 0; background:#83919F; width:2px; vertical-align:bottom;}
    .tree-group-small .large-tree { height:90px; }
    .tree-group-small .avg-tree { height:60px;}
    .tree-group-small .small-tree { height:30px;}
    
    
    .left-leaf i{width:10px; height:10px; border-radius:0 10px 0 10px; display:inline-block; background:#ACCF37; position:relative;behavior: url(css/PIE.htc); }
    .left-leaf  {position:absolute; left:-10px;}
    .right-leaf i{width:10px; height:10px; border-radius:10px 0 10px 0; display:inline-block; background:#ACCF37; position:relative; behavior: url(css/PIE.htc);}
    .right-leaf  {position:absolute;}

JavaScript

var treeGroupTypes, treeType, leftLeafClass, rightLeafClass;
    treeGroupTypes = ["tree-group-small", "tree-group-avg", "tree-group-large", "tree-group-large", "tree-group-avg", "tree-group-small", "tree-group-small", "tree-group-avg", "tree-group-large", "tree-group-large", "tree-group-avg", "tree-group-small"];
    treeType = ["small-tree", "avg-tree", "large-tree"];
    leftLeafClass = "left-leaf";
    rightLeafClass = "right-leaf";
    
    buildTreesJquery(treeGroupTypes, treeType, leftLeafClass, rightLeafClass);

function buildTreesJquery(treeGroupTypes, treeType, leftLeafClass, rightLeafClass){
    for (j = 0; j < treeGroupTypes.length; j++) {
        var treeGroup = $(document.body).append("div").addClass("trees");
        for (i = 0; i < treeType.length; i++) {
            var tree = treeGroup.append("div").addClass(treeType[i]);
            var leftLeaf =tree.append("span").addClass(leftLeafClass);
            var rightLeaf =leftLeaf.clone();
            leftLeaf.append("i");
            rightLeaf.append("i");
            
            if (treeGroupTypes[j] == "tree-group-large" && treeType[i] == "large-tree") {
                for (l = 1; l < 4; l++) {
                    var more = rightLeaf.clone();
                    more.css("top", (tree.height() / 4) * l).appendTo(tree)
                }
            }
            else if (treeGroupTypes[j] == "tree-group-avg" && treeType[i] == "large-tree") {
                for (l = 1; l < 3; l++) {
                    var more = rightLeaf.clone();
                    more.css("top", ((tree.height() / 3) * l) + 10).appendTo(tree)
                }
            }
            else {
                rightLeaf.css("top", tree.height() / 3).appendTo(tree)
            }
        }
    }
}
    
    function buildTrees (treeGroupTypes, treeType, leftLeafClass, rightLeafClass) {
            for (j = 0; j < treeGroupTypes.length; j++) {
                var treeGroup;
                treeGroup =...