JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="http://tinysort.sjeiti.com/src/jquery.tinysort.min.js"></script>
<div id="leaderboard">
</div>

CSS

html
{
    font-family: Helvetica, arial, sans-serif;
}
#leaderboard
{
    text-align:left;
}
.rank
{
    display:block;
    position:relative;
    
    width: 300px;
    padding: 10px 0 10px 90px;
    margin: 10px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
}

.score
{
    position:absolute;
    top:10px;
    left:10px;
    font-size:25px;
    color:#666;
}

JavaScript

/*---------Ignore this. It's required for JSFiddle to work with AJAX------------*/
var randomRank_1 = 1;
var randomRank_2 = 2;
var randomRank_3 = 3;
var randomRank_4 = 4;
var data = "";

/*---------Ignore this. It's required for JSFiddle to work with AJAX------------*/

    
poll();


function sort() 
{
 
    var $Ul = $('ul#leaderboard');
    $Ul.css({position:'relative',height:$Ul.height(),display:'block'});
    var iLnH;
    var $Li = $('ul#leaderboard>li');
    $Li.each(function(i,el){
        var iY = $(el).position().top;
        $.data(el,'h',iY);
        if (i===1) iLnH = iY;
    });
    $Li.tsort('h1:eq(0)',{order:'desc'}).each(function(i,el){
        var $El = $(el);
        var iFr = $.data(el,'h');
        var iTo = i*iLnH;
        $El.css({position:'absolute',top:iFr}).animate({top:iTo},500);
    });

    
    //Keep things simple for now. I'm not so sure about the sorting code above
    $('.rank').tsort('span.score');
}





function poll() {
    
    /*For Testing purposes*/
    //Create a new random score for the data
    randomRank_1 = Math.floor((Math.random()*100)+1);
    randomRank_2 = Math.floor((Math.random()*100)+1);
    randomRank_3 = Math.floor((Math.random()*100)+1);
    randomRank_4 = Math.floor((Math.random()*100)+1);
    //generate the JSON
    data = '[{"rank_number":"1","player_id":"26","facebook_id":"1294381410","name":"jamie.norrisstill","score":"'+randomRank_1+'"},{"rank_number":"2","player_id":"24","facebook_id":"1294381410","name":"damien.norris.98","score":"'+randomRank_2+'"},{"rank_number":"3","player_id":"27","facebook_id":"1294381410","name":"rita.norris.121","score":"'+randomRank_3+'"},{"rank_number":"4","player_id":"29","facebook_id":"1294381410","name":"andreyin","score":"'+randomRank_4+'"}]';
    var createJSON = { json: data , delay: 0};
    /*------------------------------*/


$.ajax({
        url: '/echo/json/',
        data: createJSON,
        type: "POST",
        dataType: 'json',
        success: function(ranks)...