JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/handlebars@latest/dist/handlebars.js"></script>
<!-- 
If you need a specific version:
<script src="https://unpkg.com/handlebars@4.3.0/dist/handlebars.js"></script> -->

<div id="output"></div>
<script type="template/handlebars" id="template"><table style="border-collapse: collapse; width: 100%;" border="1"><colgroup><col><col><col><col></colgroup>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">{{#each itemList}}</td>
</tr>
<tr>
<td>{{name}}</td>
<td>{{price}}</td>
<td>{{qty}}</td>
<td>{{total}}</td>
</tr>
<tr>
<td colspan="4">{{/each}}</td>
</tr>
</tbody>
</table></script>

JavaScript

var template = Handlebars.compile(document.getElementById('template').innerHTML);

document.getElementById('output').innerHTML = template({itemList: [{name:"test1",price:"2",qty:"3",total:"4"},{name:"test 2",price:"4",qty:"13",total:"224"}]});