JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<script id="p" type="text/x-handlebars">
    <div id="table-nav-tabs">
        <ul class="nav nav-tabs">
            <li class="{{#if active_apple}}active{{/if}} apple"><a href="{{id}}">apple</a></li>
            <li class="{{#if active_orange}}active{{/if}} orange"><a href="{{id}}">orange</a></li>
            <li class="{{#if active_mango}}active{{/if}} mango"><a href="{{id}}">mango</a></li>
            <li class="{{#if active_pineapple}}active{{/if}} pineapple"><a href="{{id}}">pineapple</a></li>
        </ul>
    </div>
</script>
<script id="t" type="text/x-handlebars">
    {{> fruits-nav active}}
</script>

CSS

li.active {
    background: #eee;
}

JavaScript

Handlebars.registerPartial('fruits-nav', $('#p').html());
var t = Handlebars.compile($('#t').html());
$('body').append(t({
    id: 6,
    active: { active_pineapple: true }
}));