JSFiddle - React, Tailwind, and code Playground

by Raynos

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script id="fileTemplate" type="text/x-jquery-tmpl"> 
    <tr>
    <td> Timestamp: ${timestamp}.
    {{each files}}
        <td> ${$value} </td>
    {{/each}}
    </tr>
</script> 

<table id="diff"></table>

CSS

#diff {
    border-width: 1px;
    border-color: black;
    border-style: solid;
}

#diff td {
    border-width: 1px;
    border-color: black;
    border-style: solid;
    width: 200px;
}

JavaScript

var timestamps = [
    { timestamp: "12:00", files: ["foo", "bar"] },
    { timestamp: "12:01", files: ["foo", "bar", "baz"] }
];

// Render the template with the movies data
$( "#fileTemplate" ).tmpl( timestamps).appendTo( "#diff" );