JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://examples.kevinchisholm.com/libraries/mustache.js"></script>
<!-- Creating "if not" logic in your Mustache.js Template || blog.kevinchisholm.com -->

<!-- this div is empty on page load -->
<div class="box"></div>
    
<!-- this is the HTML template -->
<script type="text/html" id="template">
    <h1>Acme Travel - Sales Team</h1>
    <ul>
        {{#sales}}
        <li>
        <div class="salesRep">
            <b>Name:</b> {{name}}<br />a
            {{#region}}<b>Region:</b> {{region}}<br />{{/region}}
            {{^region}}<span class="missing">No region assigned</span><br />{{/region}}
            {{#phone}}<b>Phone:</b> {{phone}}<br />{{/phone}}
            {{^phone}}<span class="missing">No phone # provided</span><br />{{/phone}}
            {{#email}}<b>Email:</b>{{email}}<br />{{/email}}
            {{^email}}<span class="missing">No email address provided</span><br />{{/email}}
        </div>
        </li>
        {{/sales}}
    </ul>
</script>

CSS

body{font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica, Arial,"Lucida Grande",sans-serif;font-weight:300;font-size:18px;}
.box{width:800px;margin:0 auto;min-height:20px;background-color:#ededed;border:1px solid #ccc;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:1%;}
ul,li{list-style-type:none;}
.salesRep{margin-top:10px;padding:10px;border-top:2px solid #444;}
.missing{font-style:italic;color:#8B0000;}

JavaScript

var data = {
        sales: [
            {
                name: "Jim Frost",
                region: "USA East",
                phone: "212-555-1212",
                email: "[email protected]"
            },
            {
                name: "Jan Smith",
                region: "USA West",
                phone: "310-555-1212",
            },
            {
                name: "Fred Wesley",
                phone: "608-555-1212",
                email: "[email protected]"
            },
            {
                name: "Lisa Moore",
                region: "USA South",
                phone: "315-555-1212",
                email: "[email protected]"
            },
            {
                name: "Jim Dio",
                phone: "+ 44 022-555-1212",
                email: "[email protected]"
            },
            {
                name: "Charles Watts",
                region: "Spain",
                email: "[email protected]"
            },
            {
                name: "Bert Cooper",
                region: "Italy",
                email: "[email protected]"
            }
        ]
};

//get a reference to our HTML template
template = $('#template').html(),

//tell Mustache.js to iterate through the JSON and insert the data into the HTML template
output = Mustache.render(template, data);

//append the HTML template to the DOM
$('.box').append(output);