JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<div id="some-stuff"></div>

<script id="some-template" type="text/x-handlebars-template">
  <ul>
  	{{#test this}}{{/test}}
  </ul>
</script>

CSS

body {
  color: #515151;
}

ul {
  float: left;
}

JavaScript

Handlebars.registerHelper('test', function(obj, options) {
  var sortIn = ['red', 'green', 'blue', 'yellow'];
  var rt = '';

  sortIn.forEach(function(entry) {
    for (var i = 0; i < obj[entry].length; i++) {
      rt += '<li><span>' + obj[entry][i] + '</span></li>';
    }
  });

  return rt;
});

var source = $("#some-template").html();
var template = Handlebars.compile(source);

var data = {
  'yellow': ['Yellow', 1, 2, 3, 4, 5],
  'green': ['Green', 1, 2, 3, 4, 5],
  'blue': ['Blue', 1, 2, 3, 4, 5],
  'red': ['Red', 1, 2, 3, 4, 5]
};

var html = template(data);
$("#some-stuff").html(html);