JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="result"></div>
<script type="text/template" id="template">
    
    {{# if (comments && comments.length > 0 ) { }}
    {{# _.each( comments, function( comment, i ) { }}
         
        <div class="commentBox" style="margin:2px 2px 22px 2px;" id="{{comment.id}}">
            {{{comment.text}}}<br/><br/>
            <b> {{comment.added_by_user.user_profile.first_name}} {{comment.added_by_user.user_profile.last_name}}</b>&nbsp;&nbsp;
            <span class="txtGray" data-timestamp="{{comment.added_date_time}}" title="{{{comment.absolute_date}}}">{{comment.time_ago}} ago</span>
            <div class ="FloatRight" >
                <span>
                    <a class="reply pointer FloatRight"   data-id="{{comment.id}}">Reply</a>
                </span>
                {{# if( comment.own_comment === true ) { }}
                    <span>
                        <a class="edit pointer"   data-id="{{comment.id}}">Edit</a>  |  
                    </span>
                    <span>
                        <a class="delete pointer"  data-id="{{comment.id}}">Delete</a> |
                    </span>
                {{# } }}
            </div>
            <div class="DisplayNone" id="reply{{comment.id}}">
                <textarea id="textArea"  class="input-block-level replytext" data-id="{{comment.id}}"></textarea>
                <div class ="FloatRight" >
                    <span>
                        <a class="add pointer"   data-id="{{comment.id}}">Add</a>  |  
                    </span>
                    <span>
                        <a class="cancelreply pointer"  data-id="{{comment.id}}">Cancel</a>
                    </span>
                </div>
            </div>                
        </div>
        <div class="commentBox DisplayNone"  style="margin:2px 2px 22px 2px;" id="edit{{comment.id}}">
            <textarea class="commenttext" style="width :98%"...

CSS

.DisplayNone {display: none}

JavaScript

// set underscore template
 _.templateSettings = {
     evaluate: /\{\{#(.+?)\}\}/g,
     interpolate: /\{\{([^#].*?)\}\}/g,
     escape: /\{\{\{(.+?)\}\}\}/g
 };


var comments = [{
    id:1,
    text: "hello world",
    time_ago: "5 hrs",
    added_by_user: {
        user_profile:  {
            first_name: "Zain" ,
            last_name: "Shaikh"
        }
    },
    reply_comment_list: [{
    id:1,
    text: "bye world",
    time_ago: "5 hrs",
    added_by_user: {
        user_profile:  {
            first_name: "Zayed" ,
            last_name: "Qamar"
        }
    }},{
    id:1,
    text: "chup bay",
    time_ago: "5 hrs",
    added_by_user: {
        user_profile:  {
            first_name: "Baseer" ,
            last_name: "Haider"
        }
    }}]
}];

 var templateHtml = $('#template').html()
 var entriesTmpl = _.template(templateHtml);

 var compiled = entriesTmpl({
     comments: comments,
     template: entriesTmpl
 })


 $el = $('#result');
 $el.html(compiled);