JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<div id="DocumentResults"></div>
<script id="document-template" type="text/x-handlebars-template">
    <div>
        {{#each apidata}}
            <div class="row">
                <div class="col-md-12">
                    <h2>{{Category}}</h2>
                        {{#DocumentList}}
                            <p>{{DocumentName}} at {{DocumentLocation}}</p>
                        {{/DocumentList}}
                </div>
            </div>
        {{/each}}
    </div>
</script>

CSS

.row {
    border: 1px solid red;
}

JavaScript

$(function () {
    var source = $("#document-template").html();
    var template = Handlebars.compile(source);
    var html = template({
        apidata: data
    });
    $('#DocumentResults').html(html)
})

var data = [{
    Category: "General",
    DocumentList: [{
        DocumentName: "Document Name 1 - General",
        DocumentLocation: "Document Location 1 - General"
    }, {
        DocumentName: "Document Name 2 - General",
        DocumentLocation: "Document Location 2 - General"
    }]
}, {
    Category: "Unit Documents",
    DocumentList: [{
        DocumentName: "Document Name 1 - Unit Documents",
        DocumentList: "Document Location 1 - Unit Documents"
    }]
}, {
    Category: "Minutes"
}];