JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<script type="foo/bar" id='subtemplate'>
    <% var mixer = function(v){ 
        var index = Math.floor(v.length * Math.random());
        var x = 
            v.substr(0,1).toUpperCase() +
            v.substr(index+1) + 
            v.substr(1,index)
        return x
    } %>
    <%= 
        mixer(item.name || "foobar") 
    %>
</script>
<script type="text/html" id="randomStyle">
    tr.<%= classname %>.head td[colspan] {
        color:rgb(<%= color() %>,<%= color() %>,<%= color() %>);
        background:url('<%= icons[rint(icons.length)] %>') no-repeat  100% 100%;
     }
    tr.<%= classname %>.head {
        background-color:#<%= rhex(128) %><%= rhex(128) %><%= rhex(128) %>;
     }    
</script>
<script type="text/html" id='usageList'>
 <p>Yes it can be overwhelming, but i have many examples in here showing what can be done. Try 
     <a href="http://jsfiddle.net/aPv9H/">a much simpler example</a> or <a href="http://jsfiddle.net/aPv9H/1/">one of its forks</a> 
<table cellspacing='0' cellpadding='0' border='1' >
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Mixer</th>
                <th>Length</th>
            </tr>
        </thead>
        <tbody>
        <% 
            var groups = _.groupBy(items,function(item,key,list){
                return item.name.substr(0,1);
            });
            _.each(groups,function(group,i,list){
                var first = group[0].name.substr(0,3);
                var last = group[group.length-1].name.substr(0,3);
                var cssClass = group[0].name.substr(0,1).toLowerCase();
                if(first === last) 
                    (last = undefined) && (first = group[0].name);
        %>
            <a href="#<%= i %>">
                <%= first %><%= last ? " to " + last : "" %></td>
            </a> |
            <tr class="head <%= cssClass %>" >
         ...

CSS

table {
    border:1px solid #000;
    width:100%;
}
thead th {
    padding:10px;
    color:#333;
    background-color:#111
}
td[colspan] {
    padding:10px;
    text-align:right
}

.head a {color:#FFF;margin-right:25px;}

JavaScript

var items = [
        {name:"Alejandro"},
        {name:"Alexander"},
        {name:"Ashley"},
        {name:"Barklay"},
        {name:"Barney"},
        {name:"Bixley"},
        {name:"Brian"},
        {name:"Charlie"},
        {name:"Chauna"},
        {name:"Chester"},
        {name:"Chuck"},
        {name:"Danny"},
        {name:"Domingo"},
        {name:"Edward"},
        {name:"Elaine"},
        {name:"Lillian"},
        {name:"Lucus"},
        {name:"Morgan"},
        {name:"Yasamin"},
        {name:"Yolando"},
        {name:"Zachary"},
        {name:"Zendra"}
    ];
/* 
if you put templates into one object you can pass them to your templates
and use them as subtemplates
*/
var tmpl = {
    template : _.template($("#usageList").html()),
    subtemplate : _.template($("#subtemplate").html()),
    randomStyle : _.template($("#randomStyle").html())
}
var icons = _.map([
    "fishing",
    "fire",
    "arts",
    "bar",
    "bus",
    "cabs",
    "campfire",
    "campground",
    "caution",
    "coffeehouse",
    "conveniencestore",
    "cycling",
    "rail",
    "electronics",
    "ferry"
],function(v){
    return "http://maps.google.com/mapfiles/ms/icons/"+v+".png";
})
$("#target").html(tmpl.template({icons:icons,items:items,tmpl:tmpl}));