JSFiddle - React, Tailwind, and code Playground

by krishna chaitanya nalluri

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/html" id='usageList'>
<table cellspacing='0' cellpadding='0' border='1' >
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
        <% _.each(items,function(item,key,list){ 
            // create more variables
            var f = item.name.split("").shift().toLowerCase(); 
        %>
            <tr>
                <!-- use variables -->
                <td><%= key %></td>
                <td class="<%= f %>"><%= item.name %></td>
            </tr>
        <% }); %>
    </tbody>
</table>
</script>

<!-- Create your target -->
<div id="target"></div>

CSS

table {
    border:1px solid #000;
    width:100%;
}
th, td {
    padding:10px;
}
.a {color:red}
.b {color:blue}
.c {color:green}
.d {color:purple}
.e {color:orange}
.y {color:gold}
.z {color:rojo}

JavaScript

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