JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id01"></div>

CSS

h1 {
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}
h1 {
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}
table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}

JavaScript

var xmlhttp = new XMLHttpRequest();
var url = "http://schwartzcomputer.com/ICT4570/Resources/USPresidents.json";

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    var rows = '';
    var table = '<h1>Presidents</h1><table>';
    for (i = 0; i < arr.presidents.president.length; i++) {
        rows += '<tr><td>' + arr.presidents.president[i].number + '</td><td>' + arr.presidents.president[i].name + '</td><td>' + arr.presidents.president[i].date + '</td></tr> ';
    }
    table += rows + '</table>';

    document.getElementById("id01").innerHTML = table;
}