JSFiddle - React, Tailwind, and code Playground

by Vlad Korotkov

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="row1">
    <b><a href="#">Current</a></b> <i class="fa fa-square" style="color: #00FF22;" title="Online"></i>
    <br/>
    <b><a href="#">Current</a></b> <i class="fa fa-square" style="color: #FF5061;" title="Offine"></i>
    <br/><br/>
    <b><a href="#">g______d</a></b> <i class="fa fa-wifi" style="color: #00FF22;" title="Online"></i>
    <br/>
    <b><a href="#">g______d</a></b> <i class="fa fa-wifi" style="color: #FF5061;" title="Offine"></i>
    <br/><br/>
    <b><a href="#">cepesh</a></b> <i class="fa fa-wifi" style="color: #333;" title="Online"></i>
    <br/>
    <b><a href="#">cepesh</a></b> <i class="fa fa-wifi" style="color: #bbb;" title="Offine"></i>
    <br/><br/>
    <b><a href="#">Aritaborian</a></b> <i class="fa fa-circle-o" style="color: #ab0000;" title="Online"></i>
    <br/>
    <b><a href="#">Aritaborian</a></b> <i class="fa fa-circle-o" style="color: #00ab00;" title="Offine"></i>
    <br/><br/>
    <b><a href="#">Aritaborian</a></b> <i class="fa fa-eye" style="color: #ab0000;" title="Online"></i>
    <br/>
    <b><a href="#">Aritaborian</a></b> <i class="fa fa-eye" style="color: #00ab00;" title="Offine"></i>
    <br/><br/>
    <b><a href="#">Aritaborian</a></b> <i class="fa fa-square-o" style="color: #444;" title="Online"></i>
    <br/>
    <b><a href="#">Aritaborian</a></b> <i class="fa fa-square" style="color: #444;" title="Offine"></i>
    <br/><br/>
    <b><a href="#">Aritaborian</a></b> <i class="fa fa-circle" style="color: #30A030; font-size: 80%;" title="Online"></i>
    <br/>
    <b><a href="#">Aritaborian</a></b> <i class="fa fa-circle" style="color: #ccc; font-size: 80%;" title="Offine"></i>
    <br/>
</div>
<br/>
<div class="row2">
    <b><a href="#">Current</a></b> <i class="fa fa-square" style="color: #00FF22;" title="Online"></i>
    <br/>
    <b><a href="#">Current</a></b> <i class="fa fa-square" style="color:...

CSS

body {
    font-family:'Lucida Grande';
    font-size: 11px;
    margin-left: 40px;
    margin-right: 40px;
}
div {
    width: 150px;
    text-align: center;
}
.row1 {
    background-color:#ECECEC;
    padding:4px
}
.row2 {
    background-color:#DCE1E5;
    padding:4px
}
a:link {
    color:#006597;
    text-decoration:none
}
a:active, a:visited {
    color:#005784;
    text-decoration:none
}
a:hover {
    color:#D46400;
    text-decoration:underline
}