JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<link rel="stylesheet" href="https://twimg0-a.akamaihd.net/a/1327945730/t1/css/t1_core.bundle.css" type="text/css" media="screen">
<link rel="stylesheet" href="https://si0.twimg.com/a/1327945730/t1/css/t1_more.bundle.css" type="text/css" media="screen">



<!--div class="twttr-dialog-body">
    <div class="holding name">
        <textarea placeholder="Screen names" id="screen_names" autocomplete="off" name="screen_names" maxlength="500" style="width: 400px">UrduShairi, Ghalibaana</textarea>
        <input type="button" class="btn signup-btn js-submit js-signup-btn" style="width: 100px" value="Compare" />
  </div> 
</div-->
<div class="twttr-dialog-body">
        <div class="twttr-dialog-content">
            <div class="expando-profile-popup expanding-stream-item js-expando-profile-popup">
                <div class="component" data-component-term="profile_pane">
                    <div class="profile-modal">
                        <div class="small">
                            <strong>T : </strong> <span>Stats till today</span>  &nbsp; &nbsp; &mdash;&mdash; &nbsp; &nbsp;
                             <strong>Y : </strong> <span>Stats till yesterday</span>  &nbsp; &nbsp; &mdash;&mdash; &nbsp; &nbsp;
                            <span>
                                <strong>SORT BY : &nbsp; </strong>
                                <span class="sortby">
                                    <input type="radio" value="1" name="sortby" id="sortby_increment" checked="true"> <label for="sortby_increment"> Increment</label>
                                    <input  type="radio" value="2" name="sortby" id="sortby_today"> <label for="sortby_today"> Today</label>
                                    <input type="radio" value="3" name="sortby" id="sortby_yesterday"> <label for="sortby_yesterday"> Yesterday</label>
...

CSS

.stats {border:1px solid #E8E8E8;border-right:2px solid #E8E8E8;border-bottom: 2px solid #E8E8E8 !important;}
.stats {font-size:10px}
.small, .small label {padding: 7px 12px;color: #999;font-size: 10px;line-height: 16px;}
.small label {text-transform:uppercase;display:inline-block;padding-left:0;}
.right {float:right}
.stats th {font-weight:bold;font-size:13px;cursor:pointer;line-height: 36px;background-color: #E1E1E1;}
.stats td {border:1px solid #E8E8E8;vertical-align:middle} 
.stats .avatar-container {border-right-width:0;}
.stats .avatar-container a {padding-right:0;}
.stats h2 a {font-size: 14px; line-height: 100%; text-transform: capitalize;color:#f90}
.stats .name {border-left-width:0;}
.stats .name a {padding-top:0;padding-bottom:0;}
.stats a strong {display:inline !important}
.created_at {font-size:13px}

.stats thead tr .header {background-image: url(http://tablesorter.com/themes/blue/bg.gif);background-repeat: no-repeat;background-position: center right;cursor: pointer;}
.stats thead tr .headerSortDown {background-image: url(http://tablesorter.com/themes/blue/desc.gif);}
.stats thead tr .headerSortUp {background-image: url(http://tablesorter.com/themes/blue/asc.gif);}

JavaScript

window.chunkify = function(list, size) {
    var lists = _.groupBy(list, function(a, b) {
        return Math.floor(b / size);
    });
    lists = _.toArray(lists); //Added this to convert the returned object to an array.
    return lists;
}

window.debug = function(text) {
    window && window.console && window.console.log(text);
}

window.PageQuery = function(query) {
    if (query.length > 1) {
        this.q = query.substring(1, query.length);
    } else {
        this.q = '';
    }
    this.keyValuePairs = [];
    var items = this.q.split("&");
    if (this.q) {
        for (var i = 0; i < items.length; i++) {
            var pair = items[i];
            var values = pair.split('=');
            var key = values.shift();
            var value = values.join("=");
            this.keyValuePairs[key] = value;
        }
    };
    this.getValue = function(s) {
        return this.keyValuePairs[s];
    };
}
var pageQuerySearch = new PageQuery(window.location.search);



var list_slug = pageQuerySearch.getValue('slug') || 'sukhan-var'; //'pakistani-developers';
var get_list_users_url = 'http://stats.zainshaikh.com/TwitterStats.ashx?action=get_users&slug=' + list_slug + '&callback=?';
debug('fetching users of list: ' + list_slug);
$.getJSON(get_list_users_url, function(user_ids_result) {

    var user_ids = user_ids_result.users
    debug(user_ids);
    var lookup_users_url = 'https://api.twitter.com/1/users/lookup.json?user_id=' + user_ids.join(',') + '&include_entities=false&callback=?';

    debug('fetching data from twitter...');
    $.getJSON(lookup_users_url, function(d) {

        debug(d);

        var table_data = $('#table_data tbody');
        $(d).each(function() {

            var str = '<tr style="border-left: 6px solid #{{profile_background_color}};" data-id="{{id}}" data-screen-name="{{screen_name_lower}}">' + '<td class="avatar-container"><a href="http://twitter.com/{{screen_name}}" target="_blank"><img src="{{profile_image_url_https}}"...