JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
</head>
<body>
</body>
</html>

CSS

body {
    font-family: "Helvetica Neue", sans-serif;
}
ul {
    border: 1px dashed #ccc;
    float: left;
    padding: 10px;
    margin: 5px;
}
li {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
li:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
img {
    height: 16px;
    width: 16px;
}

JavaScript

var renderer;
(function() {
    renderer = function(data) {
        var rootEl = document.createElement("ul");
        var domEls = [];

        var self = {
            update: function(fn) {
                domEls = [];
                fn = fn ||
                function() {
                    //NOOP
                };
                data.forEach(function(item) {
                    var li = document.createElement("li");
                    li.innerHTML = item.name;
                    fn(item, li);
                    domEls.push(li);
                });
                self.populate();
            },
            populate: function() {
                domEls.forEach(function(el) {
                    rootEl.appendChild(el);
                });
            },
            getRootEl: function() {
                return rootEl;
            }
        };

        return self;
    };
}());
var pplRenderer;
(function() {
    pplRenderer = function(data) {
        var self = renderer(data);
        var maleImgUrl = "http://aux.iconpedia.net/uploads/1408846278.png";
        var femaleImgUrl = "http://www.freeiconsweb.com/Icons-show/1-1496-delicious-love/woman-256x256.png";

        var oldUpdate = self.update;
        self.update = function() {
            oldUpdate(function(item, li) {
                li.innerHTML = "<img src=" + (item.sex === "female" ? femaleImgUrl : maleImgUrl) + ">" + li.innerHTML;
            });
        };
        return self;
    };
}());
var grpsRenderer;
(function() {
    grpsRenderer = function(grpData, pplData) {
        var self = renderer(grpData);

        var oldUpdate = self.update;
        self.update = function() {
            oldUpdate(function(item, li) {
                var i = 0;
                pplData.forEach(function(person) {
                    if (person.group === item.name) {
                        i++;
                    }
                });
                li.innerHTML += " (" + i + ")";
            });
        };
  ...