JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.7.12/js/framework7.bundle.min.js" integrity="sha512-JS58mQABcqWTJC5cD8h7tNsbi3o/CB2JlccsyG1JDIID945hUNSlezULakhKkKFeZtSwDnbpTSFXwbwzvNVxzw==" crossorigin="anonymous"></script>

<script id="template" type="text/template7">
  {{#each reverse="true" items}}
    {{#js_if "this.Status === 'Completed'"}}
      <tr key="MilestoneId" class="completed">
        <td>{{MilestoneName}}</td>
        <td>
          {{#if FilePath}}<a class="splitlink external" href="{{FilePath}}"><i class="icon material-icons">find_in_page</i></a>{{/if}}
          <i class="icon material-icons">check</i>
        </td>
      </tr>
    {{/js_if}}
    {{#js_if "this.Status === 'In Progress'"}}
      <tr key="this.MilestoneId">
        <td>{{MilestoneName}}</td>
        <td>
          {{#if FilePath}}<a class="splitlink external" href="{{FilePath}}"><i class="icon material-icons">find_in_page</i></a>{{/if}}
          <small>In Progress</small>
        </td>
      </tr>
    {{/js_if}}
    {{#js_if "this.Status === 'Not Started'"}}
      <tr key="MilestoneId">
        <td>{{MilestoneName}}</td>
        {{#if FilePath}}
          <td>
            <a class="splitlink external" href="{{FilePath}}"><i class="icon material-icons">find_in_page</i></a>
          </td>
        {{else}}
          <td></td>
        {{/if}}
      </tr>
    {{/js_if}}
  {{/each}}
</script>

<div id="test"></div>

JavaScript

var object = {
  items: [{
    FilePath: null,
    MilestoneId: 54543,
    MilestoneName: "milestone started",
    Status: "In Progress",
  }]
}

var $$ = Dom7;
var template = $$('#template').html();
var compiledTemplate = Template7.compile(template);
var html = compiledTemplate(object);
$$('#test').html(html)