JSFiddle - React, Tailwind, and code Playground

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";
    
    buildTrees(treeGroupTypes, treeType, leftLeafClass, rightLeafClass);
    
    function buildTrees (treeGroupTypes, treeType, leftLeafClass, rightLeafClass) {
            for (j = 0; j < treeGroupTypes.length; j++) {
                var treeGroup;
                treeGroup = $(document.createElement("div"));
                treeGroup.addClass(treeGroupTypes[j]).appendTo(".trees")
    
                for (i = 0; i < treeType.length; i++) {
                    var leftLeaf, rightLeaf, leftIcon, rightIcon;
                    leftLeaf = $(document.createElement("span"));
                    rightLeaf = leftLeaf.clone();
                    leftIcon = $(document.createElement("i"));
                    rightIcon = leftIcon.clone();
                    leftLeaf.addClass(leftLeafClass).append(leftIcon);
                    rightLeaf.addClass(rightLeafClass).append(rightIcon);
    
                    var tree = $(document.createElement("div"));
                    tree.addClass(treeType[i]).appendTo(treeGroup);
                    leftLeaf.appendTo(tree);
    
                    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...