JSFiddle - React, Tailwind, and code Playground

HTML

<div id="product-container"></div>
                <script id="product-template" type="text/x-handlebars-template">
                      {{#each data.item}} 
                       <h2>{{brand}}</h2>
                      {{/each}}
                </script>

JavaScript

/* global Handlebars */

var ourRequest= new XMLHttpRequest();
ourRequest.open('POST', 'http://mypage');
ourRequest.onload = function(){
    if(ourRequest.status >= 200 && ourRequest.status < 400)
    {
        var data = JSON.parse(ourRequest.responseText);
        console.log(data);
        createHTML(data);
    }else
    {
        console.log("We connected to the server, but it returned and error.");
    }
};

ourRequest.onerror = function(){
  console.log("Connection error");  
};

ourRequest.send();


function createHTML(productsData)
{
    var rawTemplate = document.getElementById("product-template").innerHTML;
    var compiledTemplate = Handlebars.compile(rawTemplate);
    var ourGeneratedHTML = compiledTemplate(productsData);
    
    var productContainer = document.getElementById("product-container");
    productContainer.innerHTML = ourGeneratedHTML;
}