JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<script src="http://rawgithub.com/wycats/handlebars.js/1.0.0/dist/handlebars.js"></script>
<!-- Container -->
<table id="people"></table>


<!-- {{HB}} Template -->
<script id="pplTemplate" type="text/x-handlebars-template">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
{{#each people}} 
    {{#everyOther @index 4}} 
        <tr class="striped"> 
    {{else}}
        <tr> 
    {{/everyOther}}
            <td>{{firstName}}</td>
            <td>{{lastName}}</td>
        </tr> 
{{/each}}
</script>

CSS

#people {
    width : 300px;
}

tr {
    background-color: #FFF;
}

tr.striped {
    background-color: #EEE;
}

td {
    padding: 8px;
}

JavaScript

// Our Helper
Handlebars.registerHelper("everyOther", function (index, amount, scope) {
    if ( ++index % amount) 
        return scope.inverse(this);
    else 
        return scope.fn(this);
});

// Our Array
var context = { people: [
{ firstName :"Carolee", lastName : "Kulikowski"},
{ firstName :"Hai", lastName : "Buettner"},
{ firstName :"Deana", lastName : "Hageman"},
{ firstName :"Otis", lastName : "Denn"},
{ firstName :"Ava", lastName : "Northcott"},
{ firstName :"Tresa", lastName : "Pushard"},
{ firstName :"Toccara", lastName : "Goodlow"},
{ firstName :"Mauro", lastName : "Brinton"},
{ firstName :"Cecelia", lastName : "Wooding"},
{ firstName :"Flavia", lastName : "Zerangue"},
{ firstName :"Nikita", lastName : "Dell"},
{ firstName :"Giovanni", lastName : "Seelye"},
{ firstName :"Carla", lastName : "Kayser"},
{ firstName :"Cecila", lastName : "Fricke"},
{ firstName :"Lavona", lastName : "Wolski"},
{ firstName :"Eleonor", lastName : "Kari"},
{ firstName :"Anita", lastName : "Streeter"},
{ firstName :"Yong", lastName : "Wilkerson"},
{ firstName :"Eddy", lastName : "Cosenza"},
{ firstName :"Royce", lastName : "Chisholm"},
{ firstName :"Traci", lastName : "Schomer"},
{ firstName :"Lakendra", lastName : "Weide"},
{ firstName :"Tammie", lastName : "Sytsma"},
{ firstName :"Santo", lastName : "Hogg"},
{ firstName :"Thea", lastName : "Tallon"},
{ firstName :"Chara", lastName : "Petrone"},
{ firstName :"Annabelle", lastName : "Villescas"},
{ firstName :"Vicenta", lastName : "Zachary"},
{ firstName :"Renee", lastName : "Mccubbin"},
{ firstName :"Ruthe", lastName : "Foutz"},
{ firstName :"Deborah", lastName : "Armistead"},
{ firstName :"Telma", lastName : "Waldo"},
{ firstName :"Tamiko", lastName : "Nealey"},
{ firstName :"Johnson", lastName : "Wieczorek"},
{ firstName :"Kristal", lastName : "Lafrance"},
{ firstName :"Viola", lastName : "Runkle"},
{ firstName :"Florrie", lastName : "Orem"},
{ firstName :"Marceline", lastName : "Harford"},
{ firstName :"Kortney",...