JSFiddle - React, Tailwind, and code Playground

by Street Hawk

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>

<div id="small-content-placeholder"></div>
</br>
<div id="big-content-placeholder"></div>

<script id="small-template" type="text/x-handlebars-template">
        <table>
            <thead>
                <th>Username</th>
                <th>email</th>
            </thead>
            <tbody>
                {{! use this for just_data}} 
                {{!#just_data}}
                {{#each small_data}} 
                    <tr>
                        <td>{{username}}
                        </td>
                        <td>{{email}}</td>
                    </tr>
                {{/each}} 
                {{!/just_data}}
            </tbody>
        </table>
    </script>
    
    <script id="big-template" type="text/x-handlebars-template">
        <table>
            <thead>
                <th>Username</th>
                <th>email</th>
            </thead>
            <tbody>
                {{#each big_data}}
                    <tr>
                        <td>{{name}}
                                <ul>
                                    {{#details}}
                                        <li>{{username}}</li>
                                        <li>{{email}}</li>
                                    {{/details}}
                                </ul>
                        </td>
                        <td>{{email}}</td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </script>

JavaScript

$(document).ready(function () {
            var small_source   = $("#small-template").html();
            var small_template = Handlebars.compile(small_source);
            
            var small_data = 
                [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" }
                ];
 /*   var small_data = {
                just_data: [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" }
                ]
            }; */
    
            $("#small-content-placeholder").html(small_template({small_data:small_data}));
            // $("#small-content-placeholder").html(small_template(just_data));    
            
            
          var big_source = $("#big-template").html();
          var big_template = Handlebars.compile(big_source);
          var big_data = [
                {
                    name: "users1",
                    details: [
                        {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                        {username: "allison1", firstName: "Allison", lastName: "House", email: "[email protected]" },
                        {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
                      ]
                },
                {
                    name: "users2",
                    details: [
                        {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                        {username: "allison2", firstName: "Allison", lastName: "House", email: "[email protected]" },
                        {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
         ...