JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script src="https://raw.github.com/olado/doT/master/doT.min.js"></script>
<div id="focus">    
    <script type="text/html" id="template">
    <div>
        {{~it.items :value:index}}
        <p>
        <span>{{=value.title}}</span> 
        <span>{{=value.type}}</span>
        </p>
        {{~}}
    </div>
    </script>
</div>

JavaScript

var model = {};
model.items = [];
model.items.push(
    {title: "Fergal", type: "foo"}, 
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"}, 
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"}, 
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"},
    {title: "Fergal", type: "foo"}
);

var template = doT.template($("#template").html());
$("#focus").html(template(model));