JSFiddle - React, Tailwind, and code Playground

by oshea00

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/cdn.limpidfox.com/bootstrap.css">
<script src="https://s3.amazonaws.com/cdn.limpidfox.com/jsrender.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/cdn.limpidfox.com/bootstrap-responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div id="output"></div>

<script id="template" type="text/x-jsrender">
    <ul>
    {{for people}}
        <li>{{:name}} likes to wear {{:shirtColor}} shirts</li>
    {{/for}}
    </ul>
</script>

<button id="goBtn" class="btn btn-primary">Go JsRender</button>
<button id="clrBtn" class="btn btn-danger">Clear</button>

CSS

body {
    margin: 15px;
}

JavaScript

var data = {
    people: [
        {
            name: "Dan Wahlin",
            shirtColor: "white "
        }, {
            name: "John Papa ",
            shirtColor: "black"
        }, {
            name: "Scott Guthrie ",
            shirtColor: "red"
        }
    ]
};

$('#goBtn').click(function(){
$("#output").html($("#template").render(data));
});

$('#clrBtn').click(function(){
$('#output').empty();
});