JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script src="https://raw.github.com/azproduction/jquery.notification/master/jquery.notification.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div data-role="page">
    <div data-role="header" data-theme="b">
         <h1>
            Twitter Stats</h1>

        <!--a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse"
        class="ui-btn-right jqm-home">Home</a--> <a onclick="javascript:start()" data-icon="refresh" data-iconpos="notext"
        class="ui-btn-right">refresh</a>

    </div>
    <!-- /header -->
    <div data-role="content">
        <br />
        <ul class="listview" data-role="listview">
            <li class="header" data-theme="a">
                <div class="ui-grid-d">
                    <div class="ui-block-a"><a href="javascript:sort('screen_name')">Name</a>
                    </div>
                    <div class="ui-block-b"><a href="javascript:sort('statuses_count.new')">Tweets</a>
                    </div>
                    <div class="ui-block-b"><a href="javascript:sort('statuses_count.increment')">TN</a>
                    </div>
                    <div class="ui-block-b"><a href="javascript:sort('followers_count.new')">Followers</a>
                    </div>
                    <div class="ui-block-b"><a href="javascript:sort('followers_count.increment')">TF</a>
                    </div>
                </div>
            </li>
            <li class="header" data-theme="e" id="my_total_tr"></li>
            <li class="header" data-theme="e" id="his_total_tr"></li>
            <!--li data-theme="d"><div class="ui-grid-d">
                <div class="ui-block-a"><a href="#">Block...

CSS

* {
    font-size: 11px
}
/*
tbody .label-success {background-color: #468847 !important;}
tbody .label-info {background-color: #3A87AD !important;}
*/
 .label a {
    color : #fff
}
.label:hover a {
    color: #fff;
}
tr:hover td, tr:hover th {
    background-color: transparent !important
}
h1 {
    line-height: normal !important;
}
.ui-block-a {
    width: 40% !important;
}
.ui-block-b {
    width: 15% !important;
    text-align: center
}
#table {
    display: none
}
.ui-li-static.ui-li {
    padding-right:15px;
}
.ui-content {
    padding-top: 0
}
.header[data-theme="a"] a {
    color:#fff !important;
}
.ui-mobile-viewport {
    margin:0;
    overflow-x:hidden;
    -webkit-text-size-adjust:auto;
    -ms-text-size-adjust:auto;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0)
}

.progress {
    height:7px;
    margin-bottom: 0;   
}
.media-body {font-size: 0.9em}
.media .pull-left {width: 32px;}

JavaScript

$(document).one('click', function () {
    window.webkitNotifications && window.webkitNotifications.requestPermission();
});

//update ();
window.trs = [];

window.update = function () {
    var html = window.trs.join("");
    //  $('#table>tbody').append(html );
    //$('#table>tbody').html(html);
    //var h = $(html);
    $('.listview li').not(".header").remove();
    $('.listview').append(html);
    $('.listview').listview("refresh");
    window.trs = [];
    //},100);
}

window.digits = function (text) {

    return (text || "").toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

};

window.numerize = function (number, hide_sign) {

    return (number > 0) ? (hide_sign ? "" : "+") + digits(number) : number;

};

window.notify = function (text) {
    var options = {
        "content": text,
            "title": "Followers Stats",
            "autoclose": false,
            "timeout": (1000 * 5)
    };
    /*
    $.notification(options, function(isNotificationsAllowed) {
        if (isNotificationsAllowed) {
            //notification.show();
        }
    }).show();
    */
};



var my_users = '@FARAZTHEPOET, @FAIZAZFAIZ, @HAFEEZJALANDHRI, @_JONELIA_, @MEERDARD, @_MEERTAQIMEER_, @MIRZABEDIL, @__GHALIB__, @_NASIRKAZMI_, @_PARVEENSHAKIR_, @PUNJABIPOETRY, @RUMIWORLD, @__SAQI__, @THESUFIQUOTES, @URDUSHAIRI, @WASIFALIQUOTES, @_NOSHIGILANI_, @IqbalLahori, @WorldlyQ, @FerdowsiPoetry, @HAFIZSHIRAZI, @NezamiPoetry, @PERSIAN_POETRY, @FOROUGHPOETRY, @INSHAJII'.toLowerCase();

var his_users = '@GULZARPOETRY, @GHALIBPOETRY, @MIRPOETRY, @IQBALPOETRY_, @FAIZPOETRY, @FARAZPOETRY_, @JAGJITSINGHG,@BollywoodPoetry'.toLowerCase();




window.users = [];
window.sort_order = "asc";
window.column = null;
window.sort = function (_column) {
    column = _column || column;
    setTimeout(function () {

        if (_column) {
            sort_order = sort_order == "asc" ? "desc" : "asc";
            if (sort_order == "asc") {
                //var tempY = y;
                //y =...