JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chatBody">
    <ul id="navlist">
        <li class="active">
            <div class="frdImage"></div>
            <span class="frdName">Igor Gomes</span>
            <div style="display:inline; float:left">
                <span class="frdStatusIndicator"></span>
                <span class="frdStatusName">Online</span>
            </div>
        </li>
        <li class="active">
            <div class="frdImage"></div>
            <span class="frdName">Igor Gomes</span>
            <div style="display:inline; float:left">
                <span class="frdStatusIndicator"></span>
                <span class="frdStatusName">Online</span>
            </div>
        </li>
    </ul>
</div>

CSS

body {
    background-image:url('http://subtlepatterns.com/patterns/shattered.png');
    margin:0;
}
.chatBody {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background-color:#3c454f;
    border-top: 10px solid #7ac943;
}
#navlist li {
    display: inline-block;
    list-style-type: none;
    width:300px;
}
.avatarUser {
    height:80px;
    width:80px;
    background-color:yellow;
    float:left;
    margin-right:20px;
    margin-bottom:20px;
}
li > .frdImage {
    position: relative;
    /*margin-top:-25px;*/
    top:50%;
    float:left;
    margin-left:5px;
    border-radius: 6px;
    border: solid 2px #aaa;
    height:80px;
    width:80px;
    background-color:yellow;
    margin-right:10px;
    margin-bottom:20px;
}
li > span.frdName {
    position:absolute;
    float:left;
    margin-top:10px;
    font-weight: bold;
    font-family:'Verdana', cursive;
    font-size: 15px;
    color: white;
    margin-right:200px;
}
.active{
    width:300px;
}
.frdStatusIndicator{
    float:left;
    margin-top:40px;
    height:15px;
    width:15px;
    background-color: #7ac943;
    border-radius: 10px;
}
.frdStatusName{
    float:left;
    margin-top:40px;
    border-radius: 10px;
    font-family:'Verdana', cursive;
    font-size: 15px;
    color: white;
    line-height:15px;
    padding-left:5px;
}