JSFiddle - React, Tailwind, and code Playground

by djoice

CSS

@font-face {
    font-family: "TF2";
    src: url("fonts/tf2secondary.ttf");
}

@font-face {
    font-family: "TF2Build";
    src: url("fonts/tf2build.ttf");
}

/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0}fieldset,img{border:0}table{border-collapse:collapse;border-spacing:0}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%}q:before,q:after{content:''}abbr,acronym{border:0}
/* Standard Elemente */
    html, body { height: 100%; }
    body {
        font-size: 14px;
        line-height: 1em;
        font-family: TF2, Arial, Helvetica, Geneva, sans-serif;
        color: #F0E1BA;
        background: #6b4532 url('images/bg.jpg') repeat-x;
    } 
        
    /* Links */
    a {
        color: #F77D3A;
        text-decoration: none;
        font-weight: bold;
    }

        a:visited { }
        a:hover, a:focus { color: #ECD1C1; }
        a:active { }

    /* Forms */

    input {
    }
    label {
    }
    input:focus {
    }
    
    textarea { }
    button { }
    /* Text */
    q { }
    q q { }

    blockquote { }
    strong { font-weight:bold; }
    em { font-style: italic; }

    p {
        padding: 5px 0 0 5px;
    }

    h1,h2,h3,h4 {
         float: left;
         color: #F77D3A;
         font-family: "TF2Build";
    }
    h1 { font-size: 14px; }


/* Layout */
#background_image{
    background:url("images/bg.png") no-repeat scroll center -37px transparent;
    height:680px;
    position:absolute;
    width:100%;
    z-index:-5;
}
#wrapper{
    width: 955px;
    min-height:100%; 
    margin: 0 auto;
}
#header{
    width: 935px;
    height: 220px;
    background: url("images/header.png") center no-repeat;
    float: left;
    clear: both;
}
a#logo{
    display:block;
    height: 220px;
    width: 935px;
    overflow: hidden;
    text-indent:...

JavaScript

$(document).ready(function(){
    refreshRate = 5000;
    refreshInterval = setInterval('refreshUsers()', refreshRate);
    readystatus();
});

function refreshUsers() {
    
    $.ajax({
        data: {"id": 1, "request": "lobbyplayers"},
        url: 'api.php',
        success: function(data){
            result = JSON.parse(data);
            $bluUl = $('ul.blue_players').empty().append('<li class="teamname blu">BLU</li>');
            $redUl = $('ul.red_players').empty().append('<li class="teamname red">RED</li>');

            for(var i=0;i<result.size;i++) {
                if(!result.blu[i]) {
                    result.blu[i] = {
                        id: 0,
                        class: null,
                        nickname: 'empty',
                        avatar: null
                    };
                }

                $li  = $('<li>');
                $a   = $('<a>');
                $class = $('<img>');

                $a.attr('href', 'profile.php?id=' + result.blu[i].id);
                $class.attr('src', 'theme/images/class/' + (result.blu[i].class ? result.blu[i].class : 'noclass') + '.png');
                $a.append($class).append(result.blu[i].nickname);
                if(result.blu[i].avatar) {
                    $avatar = $('<img>').addClass('avatar');
                    $avatar.attr('src', (result.blu[i].avatar ? result.blu[i].avatar : ''));
                    $a.append($avatar);
                }
                $li.append($a);
                $bluUl.append($li);
            }

            for(var i=0;i<result.size;i++) {
                if(!result.red[i]) {
                    result.red[i] = {
                        id: 0,
                        class: null,
                        nickname: 'empty',
                        avatar: null
                    };
                }

                $li  = $('<li>');
                $a   = $('<a>');
                $class = $('<img>');

                $a.attr('href',...