JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.fsfoo.com/js/vendor/handlebars-1.0.rc.2.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="product-container"></div>
<script id="product-template" type="text/x-handlebars-template">
    {{#data.item}} 
        <h2>{{name}}</h2>
    {{/data.item}}
</script>

JavaScript

var productsData = {
  "status": {
    "success": true,
    "error": ""
  },
  "data": {
    "item": [
      {
        "name": "Test 1",
        "keywords": [
          "[asdad,dasdas]"
        ],
        "description": "xxzfrfa",
        "test": 12.3,
        "id": "584ab61344be2bd806ef276d"
      },
      {
        "name": "My test 2",
        "keywords": [
          "[zx,zz]"
        ],
        "description": "xz",
        "test": 53,
        "id": "584ab67b11b75c3a10fc1518"
      }
    ]
  }
};

createHTML(productsData);

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;
}