JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script type="text/ractive" id="temp">
	<ul>
  {{#countries:code}}
    <li>{{code}}: {{name}}
    	<ul>
      {{#settings:key}}
      	<li>{{key}}: {{.}}</li>
      {{/settings}}
      </ul>
    </li>
  {{/countries}}
	</ul>
</script>

JavaScript

ractive = new Ractive({
  el: 'body',
  template: '#temp',
  data: {
    countries: {
      GBR: { name: 'United Kingdom', settings: {
      "hello": "UK"
      } },
      USA: { name: 'United States', settings: {
      "hello": "USA"
      } },
      FRA: { name: 'France', settings: {
      "hello": "FRA"
      } }
    }
  }
});