JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<script type="text/x-template-lodash" id="template">
    <%
    // this is a generic template function that accepts a selector
        function tmpl(selector,data){
            return _.template($(selector).html(),data);
        };
    %>  
    <h1>This is a template</h1>
    <%= tmpl('#tmpl_ul',items) %>
    <%= tmpl('#tmpl_table',items) %>
    <%= tmpl_JSON(items) %>
</script>

<!-- subtemplates for UL, TABLE and JSON output -->

<!-- UL uses generic function created either in the template using it or in the global scope someplace -->
<script type="text/x-template-lodash" id="tmpl_ul">
    <h3>UL subtemplate</h3>
    <ul> 
        <% 
          _.each(obj,function(v,i){
            %><li><%
            _.each(_.values(v),function(vv){
        %>    
            <%- vv %>
        <%
            });
            %></li><%
          }); 
        %>
    </ul>
</script>

<!-- TABLE uses generic function -->
<script type="text/x-template-lodash" id="tmpl_table">
    <h3>TABLE subtemplate</h3>
    <table>
        <thead><tr>
        <% _.each(_.keys(obj[0]),function(v,i){ %>
            <th><%- v %></th>
        <% }); %>
        </tr></thead>
        <tbody>    
        <% 
          _.each(obj,function(v,i){
            %><tr><%
            _.each(_.values(v),function(vv){
        %>    
            <td><%- vv %></td>
        <%
            });
            %></tr><%
          }); 
        %>
        </tbody>
    </table>
</script>

<!-- JSON : an alternative method would be to create a template paired with a function that accepts data as a parameter -->                
<script type="text/x-template-lodash" id="tmpl_JSON">
    <h3>JSON subtemplate</h3>
    <% var x = JSON.stringify(obj); %>
    <%- x %>
</script>    
<script>
    function tmpl_JSON(data){
        return...

CSS

table {
    border:1px solid #000;
    width:100%;
}
td {
    padding:10px;
}
th {
    background-color:black;
    color:red;
}

JavaScript

var items = [
    {name:"Alexander",rank:"t1",serial:"56324543657",foo:"bar"},
        {name:"Barklay",rank:"t1",serial:"56324543657",foo:"bar"},
        {name:"Chester",rank:"t1",serial:"56324543657",foo:"bar"},
        {name:"Domingo",rank:"t1",serial:"56324543657",foo:"bar"},
        {name:"Edward",rank:"t1",serial:"56324543657",foo:"bar"},
        {name:"...",rank:"...",serial:"...........",foo:"bar"},
        {name:"Yolando",rank:"t1",serial:"56324543657",foo:"bar"},
        {name:"Zachary",rank:"t1",serial:"56324543657",foo:"bar"}
    ];
 
$("#target").html(_.template($("#template").html(),{items:items}));