JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="server-status">
    <li><p>101</p><div class="server-r"></div>
    <li><p>101</p><div class="server-g"></div>
    <li><p>105</p><div class="server-r"></div>
    <li><p>172</p><div class="server-g"></div>
    <li><p>181</p><div class="server-g"></div>
    <li><p>131</p><div class="server-r"></div>
    <li><p>135</p><div class="server-g"></div>
</ul>

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

body {
    background: #222;   
}

ul {
    margin:0;padding:0;
    color: #ddd;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-shadow: 0px -1px 1px rgba(250,250,250,0.3), 0px 1px 1px rgba(0,0,0,0.6);
    width: 170px;
    padding: 5px;
    box-shadow: inset 0 0 25px rgba(0,0,0,0.6);    
    background: #595959;
    background: -moz-linear-gradient(left,  hsla(0,0%,35%,1) 0%, hsla(0,2%,34%,1) 33%, hsla(165,2%,34%,1) 64%, hsla(210,7%,33%,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,35%,1)), color-stop(33%,hsla(0,2%,34%,1)), color-stop(64%,hsla(165,2%,34%,1)), color-stop(100%,hsla(210,7%,33%,1)));
    background: -webkit-linear-gradient(left,  hsla(0,0%,35%,1) 0%,hsla(0,2%,34%,1) 33%,hsla(165,2%,34%,1) 64%,hsla(210,7%,33%,1) 100%);
    background: -o-linear-gradient(left,  hsla(0,0%,35%,1) 0%,hsla(0,2%,34%,1) 33%,hsla(165,2%,34%,1) 64%,hsla(210,7%,33%,1) 100%);
    background: -ms-linear-gradient(left,  hsla(0,0%,35%,1) 0%,hsla(0,2%,34%,1) 33%,hsla(165,2%,34%,1) 64%,hsla(210,7%,33%,1) 100%);
    background: linear-gradient(left,  hsla(0,0%,35%,1) 0%,hsla(0,2%,34%,1) 33%,hsla(165,2%,34%,1) 64%,hsla(210,7%,33%,1) 100%);
}

li {
    width: 40px;
    background: #595959;
    background: rgba(255,255,255,0.0);
    text-align: center;
    display: inline-block;
    padding: 4px;
    box-shadow: inset 0px 0px 20px rgba(0,0,0,0.1), 0px 0px 20px rgba(0,0,0,0.1);
}

#server-status .server-g {
    background: #55ad0d; 
    display: block;  
    width: 14px;
    height: 14px;
    margin: 3px auto;
    border-radius: 7px;
    box-shadow: 0px 0px 18px rgba(130,225,130,0.9), 0px 0px 5px rgba(70,220,70,0.2), 0px -2px 3px rgba(0,0,0,0.35), inset -1px 1px 2px rgba(205,255,205,0.4), inset 0 -2px 3px rgba(0,0,0,0.5);
}

#server-status .server-r {
    background: #a31;
    display:...