JSFiddle - React, Tailwind, and code Playground

HTML

<div id="placeholder"></div>

CSS

table {
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}
table th {
    font-weight:bold;
    padding:8px;
    border-bottom:1px solid #666;
    text-align:left;
}
table td {
    padding:8px;
    border-bottom:1px solid #999;
    text-align:left;
}

JavaScript

$(document).ready(function (e) {
    $.getJSON('http://www.json-generator.com/api/json/get/bXClHuexaq?indent=2', function (data) {
        var output = "<table width='100%' cellspacing='0' cellpadding='0'>";
        output += "<tr>";

        output += "<th width='20%'>" + 'Tags' + "</th>";
        output += "<th width='15%'>" + 'Friends' + "</th>";
        output += "</tr>";
        for (var i in data) {
            output += "<tr>";

            output += "<td class='tags'>" + data[i].tags + "</td>";
            output += "<td>";
            for (var j = 0; j < data[i].friends.length; j++) {
                output += "<div>" + data[i].friends[j].name + "</div>";
            }
            output += "</td>";
            output += "</tr>";
        }
        output += "</table>";

        document.getElementById("placeholder").innerHTML = output;

    });
    $(".tags").text(function (i, val) {
        return val.split(",").join(", ");
    });
});