JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    
</body>
</html>

CSS

#resultTable{
                
                border: 3px solid gray;
                
                
            }

            #resultTable td{
                
                border: 1px solid gray;
                
                
            }

JavaScript

var items = [
    {
    "senderID": "00:50:c2:63:10:1a",
    "startTime": "1349773838277760",
    "endTime": "1349773838277770",
    "startArea": "areaStart",
    "endArea": "areaEnd",
    "duration": "10"},
{
    "senderID": "00:50:c2:63:10:1a",
    "startTime": "1349773838277760",
    "endTime": "1349773838277780",
    "startArea": "areaStart",
    "endArea": "areaEnd",
    "duration": "20"},
{
    "senderID": "00:50:c2:63:10:1a",
    "startTime": "1349773838277760",
    "endTime": "1349773838277780",
    "startArea": "areaStart",
    "endArea": "areaEnd",
    "duration": "20"}



];


$table = "<table id = 'resultTable'><td>nr</td><td>senderID</td><td>startTime</td><td>endTime</td><td>startArea</td><td>endArea</td><td>duration</td><tr>";

for (var i = 0; i < items.length; i++) {

    $table += "<tr>";

    var it = items[i];

    $table += "<td>" + i + "</td>";

    $table += "<td>" + items[i].senderID + "</td>";

    $table += "<td>" + items[i].startTime + "</td>";

    $table += "<td>" + items[i].endTime + "</td>";

    $table += "<td>" + items[i].startArea + "</td>";

    $table += "<td>" + items[i].endArea + "</td>";

    $table += "<td>" + items[i].duration + "</td>";

    //alert(items[i].duration);
    $table += "</tr>";

}

$table += "</table>";

$('body').append($table);
$table = "<table id = 'resultTable'><td>nr</td><td>senderID</td><td>startTime</td><td>endTime</td><td>startArea</td><td>endArea</td><td>duration</td><tr>";