JSFiddle - React, Tailwind, and code Playground

by Chetan Hanumantha

HTML

<script src="        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;&gt;"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<div class="container">

  <h1 class="text-center">Mustache Examples</h1>

  <!--  -->
  <h3>Looping through people</h3>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Language</th>
      </tr>
    </thead>

    <script id="template2">
      {{#users}}
      <tr>
        <td>{{name}}</td>
        <td>{{age}}</td>
        <td>{{language}}</td>
        {{#is_french}}
        <td>True</td>
        {{/is_french}} {{^is_french}}
        <td>False</td>
        {{/is_french}}
      </tr>
      {{/users}}
    </script>
    <tbody id="table2"></tbody>
  </table>
  <!--  -->

</div>

JavaScript

$(function() {

  /**
   * conditional data
   */
  template = $('#template2').html();
  data = {
    'users': [{
      name: 'John',
      age: 22,
      language: 'French',
      is_french: true,
    }, {
      name: 'Billy',
      age: 33,
      language: 'Anglaise',
      is_french: false,
    }, {
      name: 'Michael',
      age: 77,
      language: 'Cambodian',
      is_french: false,
    }]
  };
  $('#table2').html(Mustache.render(template, data));

});