JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.2.1/shuffle.min.js"></script>
<div id="test"></div>

<script id="template-main" type="text/template">
    <h1>{{title}}</h1>
    <ul id="products-index">
        {{#names}}
        <li class="products-index-item">
            {{> user}}
        </li>
        {{/names}}
    </ul>
    {{> footer}}
</script>

<script id="template-user" type="text/template">
    {{last}}, {{first}}
</script>

<script id="template-footer" type="text/template">
    <p>&copy; {{date}}</p>
</script>

CSS

ul li {
  padding:20px;
  background-color:gray;
  color:#fff;
  margin-bottom:20px;
}

JavaScript

// Ajax template loader
function templateLoader(name) {
    // Uses the jsFiddle API to bounce back the HTML content as a sync Ajax call
    var result = '',
        getTemplate = $.ajax('/echo/html/', {
        data: {
            html: $('#template-'+name).html(),
            delay: 1
        },
        method: 'post',
        async: false,
        success: function (data) {
             result = data;
                          console.log(data)

        },
        complete: function (data) {
        result = data;
                     console.log(data)
        	//console.log(data)

        }
    });
    return result;
}

var data = {
    title: 'Some People',
    names: [
        { first: 'Patrick', last: 'Stuart'},        
        { first: 'LeVar', last: 'Burton'},        
        { first: 'Brent', last: 'Spiner'}
    ],
    date: '1/1/2011'
};

var mainTemplate = templateLoader('main');

var html = Mustache.render(mainTemplate, data, templateLoader);

$(html).appendTo('#test')