JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<div id="render">

</div>

<script type="text/template" id="tmpl">
<div class="clothing-size-chart overlay-tabs-container modal-body__wrapper">
    <div class="overlay-tabs">
        {{#charts}}
        <div class="clothing-size-chart__show clothing-size-chart__tab overlay-tabs__item {{#selected}}overlay-tabs__active{{/selected}}">
            {{title}}
            <span class="overlay-tabs__shim"></span>
        </div>
        {{/charts}}
    </div>
    <div class="overlay-tab-content">
        {{#charts}}
        <div class="overlay-tab-content__section clothing-size-chart__container overlay-tab-content__active">
            <table border="1" width="835">
                <thead>
                    <tr>
                    {{#headings}}
                        <th>{{.}}</th>
                    {{/headings}}
                    </tr>
                </thead>
                <tbody>
                {{#rows}}
                <tr>
                    {{#.}}<td>{{.}}</td>{{/.}}
                </tr>
                {{/rows}}
                </tbody>
            </table>
        </div>
        {{/charts}}
    </div>
    <div class="clothing-size-chart__footer">This chart is for measurement only. The actual size and fit of each product
        may
        vary.
    </div>
</div>
</script>

CSS

.overlay-tabs__active { background: red; }
table {
  table-layout: fixed
}

JavaScript

var standard = {
    "title": "Home Depot Size Chart",
    "charts": [{
      "title": "Men",
      "selected": true,
      "headings": ["Size", "Chest (inches)", "Waist (inches)"],
      "rows": [
        ["Extra Small","33-34","27-28"],
        ["Small","35-37","29-31"],
        ["Medium","38-40","32-34"],
        ["Large","42-44","36-38"],
        ["Extra Large","46-48","40-42"],
        ["2X Large","50-52","44-46"],
        ["3X Large","54-56","48-50"],
        ["4X Large","58-60","52-54"],
        ["5X Large","62-64","56-58"],
        ["6X Large","66-68","60-62"]
      ]
    },
      {
        "title": "Women",
        "headings": ["Size", "Size U.S.", "Bust/Chest (inches)", "Waist (inches)"],
        "rows":[["Extra Small","0-2","31.5-32.5","23-24"],["Small","4-6","33.5-34.5","25-26"],["Medium","8-10","35.5-37.5","27-28"],["Large","12-14","38.5-40","29.5-31"],["Extra Large","16-18","41.5-43.5","35.5-38"],["Extra Large","20","45.5","40.5"]]
      }
    ]

  };
  
var template = $('#tmpl').text();
var html = Mustache.render(template, standard).replace(/^\s*/mg, '').replace(/\r?\n|\r/gm, '');

$('#render').html(html);
$('body').prepend('<textarea style="height:100px; width: 100%;">'+JSON.stringify(html)+'</textarea>');