JSFiddle - React, Tailwind, and code Playground

HTML

<table id="userTable">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Surname</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody id="userTable-rows">
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4" id="rendering-time"></td>
        </tr>
    </tfoot>
</table>

<script type="text/html" id="user_rows_tpl">

</script>

CSS

td, th {
    border: 1px solid #777;
    padding: 5px;
    background-color: #ddd;
    color: #555;
}
th {
    font-weight: 700;
    color: #ddd;
    background-color: #555;
}
tfoot td {
    text-align: center;
}

JavaScript

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};
  
  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :
      
      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
        
        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +
        
        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");
    
    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();

var names = ['Larry', 'Sergey', 'Bill'],
    surnames = ['Page', 'Brin', 'Gates'];

function randItem(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}

function getUsers() {
    var len = 1000,
        users = [];
    for(var i = 0; len > i++;) {
        users.push({
            name: randItem(names),
            surname: randItem(surnames),
            age: Math.round(30 + Math.random() * 30)
        });
    }
    return users;
};

var table = document.getElementById("userTable-rows");

var begin = new Date().getTime();

table.innerHTML = tmpl("user_rows_tpl", {
    users: getUsers()
});
document.getElementById('rendering-time').innerHTML = 'Rendering time: ' 
    + (new Date().getTime() - begin).toString() 
    + ' ms';