JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
    <script type="text/x-handlebars-template" id="template">
        {{#each this}}
            <div class="tip_whole {{addCat}} {{addDiff}}">
                <div class="tip_header">
                    <h5 class="tip_title">
                        <b>{{title}}</b> - {{diff}}
                    </h5>
                    <div class="tip_social">
                        {{>addSocial social}}
                    </div>
                </div>{{!end .tip_title}}
                <div class="tip_body">
                    <div class="grid_20 alpha">
                        <p class="tip_desc">{{description}}</p>
                        {{#if links}}
                            <div class="tip_links">
                            <h5>More information</h5>
                            {{#each links}}
                                    <a href="{{url}}" class="tip_link" target="_blank">{{title}}</a>
                            {{/each}}
                            </div>{{!end .tip_links}}
                        {{/if}}
                    </div>{{!end .grid_20 alpha}}
                    <div class="grid_19 push_2">
                        <h2 class="tip_cost_title">Avg. Cost to Implement</h2>
                        <h1 class="tip_cost_title">{{cost}}</h1>
                    </div>
                </div>{{!end .tip_body}}
            </div>{{!end .tip_whole}}
        {{/each}}
    </script>

JavaScript

(function(){

    var social=[
        {
            "url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
            "image":"IMG/media/twitter_16.png",
            "alt":"twitter link"
        },
        {
            "url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
            "image":"IMG/media/twitter_16.png",
            "alt":"twitter link"
        },
        {
            "url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
            "image":"IMG/media/twitter_16.png",
            "alt":"twitter link"
        }
    ];

    var social_partial = '<a href="{{url}}" alt="{{alt}}"><img src="{{image}}"/></a>';

    $.ajax({
        url:'data/tips.json',
        dataType:'json',
        success:function(data){
            template(data);
        },
        error:function(a,b,c){
            console.log(a+b+c)
        }
    });
    function template(data){
        var template= Handlebars.compile($('#template').html());
        var temp = template(data);
        $('.tip_container').append(temp);
    }

    Handlebars.registerHelper("addCat", function() {
        return this.cat == 'water' ? 'water' : this.cat== 'power' ? 'power' : 'paper';
    });

    Handlebars.registerHelper("addDiff", function(){
        return this.diff == 'Investment' ? 'hard' : this.diff == 'Low-Cost' ? 'medium' : 'easy';
    });

    Handlebars.registerPartial('addSocial',social_partial);

})();