JSFiddle - React, Tailwind, and code Playground

by bodyrock

HTML

<script src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/js/dust-full.2.3.1.min.js"></script>
<script src="http://rawgit.com/linkedin/dustjs-helpers/master/lib/dust-helpers.js"></script>
<script id="league-template2">
        <div class="conference"> 
        <h3>[I WANT TO PUT THE CONFERENCE NAME HERE EG EASTERN] Conference</h3>
        {#teams}   
            <ul>
                {#properties}            
                    {@eq key=name value="numeric"}
                        <li class="teamName teamdd_{value}">
                            <div class="logo-nba-small nba-small-[I WANT TO PUT THE ABBV HERE EG PHI]"><a>[I WANT TO PUT TEAM NAME HERE EG 76ERS]</a></div>
                        </li>
                    {/eq}
                {/properties}
            </ul>
       {/teams}
       </div>
    </script>
    <div id="output3"></div><br />

CSS

.teamName {
		text-indent:40px !important;
	}

JavaScript

$(document).ready(function() {
    var league2014 = {
        "teams": [{
            "properties": [{
                "years": null,
                "name": "conference",
                "value": "eastern"
            }, {
                "years": null,
                "name": "abbv",
                "value": "phi"
            }, {
                "years": null,
                "name": "numeric",
                "value": "20"
            }],
            "name": "76ers"
        }, {
            "properties": [{
                "years": null,
                "name": "conference",
                "value": "western"
            }, {
                "years": null,
                "name": "abbv",
                "value": "mem"
            }, {
                "years": null,
                "name": "numeric",
                "value": "29"
            }],
            "name": "grizzlies"
        }, {
            "properties": [{
                "years": null,
                "name": "conference",
                "value": "eastern"
            }, {
                "years": null,
                "name": "abbv",
                "value": "was"
            }, {
                "years": null,
                "name": "numeric",
                "value": "27"
            }],
            "name": "wizards"
        }]
    }    
    var source3 = $("#league-template2").html();
    var compiled3 = dust.compile(source3, "intro3");
    dust.loadSource(compiled3);
    dust.render("intro3", league2014, function(err, out) {
        $("#output3").html(out);
    });
});