JSFiddle - React, Tailwind, and code Playground

by Dhruvang Gajjar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>


<script id="Template" type="text/template">
	<ol>
    {{#each list}}
      <li>
      	<ol>
          {{#each this}}
          	<li>
              <span class="{{#if @first}}first{{/if}}">Is First: {{@first}}</span>
              <br />
              <span class="{{#if @../first}}first{{/if}}">Is Parent First: {{@../first}}</span>
            </li>
          {{/each}}
        </ol>
      </li>
    {{/each}}
  </ul>
</script>

CSS

span {
  color: red;
}

span.first {
  color: green;
}

JavaScript

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

var data = {
	list: [
  	['one', 'two', 'three'],
    ['four', 'five', 'six'],
    ['seven', 'eight', 'nine']
  ]
};

document.body.innerHTML = template(data);