JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frdList">
    <ul class="contactList">
        <li>Friends :)</li>
        <li class="p-flexbox flex-hsc">
            <img src="http://w2.vanillicon.com/2c85954e3b080d9926c53b530ca40317_50.png" />
        </li>
        <li class="p-flexbox flex-hsc">
            <img src="http://w6.vanillicon.com/6cd18e7a56ebd6fb1f3f607823b7d5fe_50.png" />
        </li>
        <li class="p-flexbox flex-hsc">
            <img src="http://wc.vanillicon.com/cd7c7d1f9a0c56ff3b8296527a98564f_50.png" />
        </li>
        <li class="p-flexbox flex-hsc">
            <img src="http://vanillicon.com/0fff488a9952086c6785f260e2c127ad_50.png" />
        </li>
    </ul>
</div>
    <!-- <div class="avatarUser">
        <div class="status">
            <img src="http://images1.wikia.nocookie.net/knd/images/3/3a/PR2.gif" />
        </div>
    </div>
    <div id="headFrdList">
        <div class="titleHead">Friend's :)</div>
    </div>
    <div class="contacts">
        
    </div>
</div>-->

CSS

/* Reset CSS */

body, div {
    margin: 0;
    padding: 0;
}

li { list-style: none; }

/* @font-faces imports */

@font-face {
    font-family:'Amatic SC';
    font-style: normal;
    font-weight: 400;
    src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

/* Basic styles */

.frdList {
    height:500px;
    width:500px;
}
.contactList > li:nth-child(1) {
    font-weight: bold;
    font-family: 'Amatic SC', cursive;
    font-size: 45px;
    text-align: center;
    color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    background-image: -webkit-linear-gradient(#2da1ec, #0191d9);
    background-image: -moz-linear-gradient(#2da1ec, #0191d9);
    background-image: -ms-linear-gradient(#2da1ec, #0191d9);
    background-image: linear-gradient(#2da1ec, #0191d9);
    border: 1px solid #0082c3;
    border-bottom: 1px solid #077be0;
    position: relative;
    height:55px;
}
.contactList > li:nth-child(1):hover {
    background-image: -webkit-linear-gradient(#2eacff, #0191d9);
    background-image: -moz-linear-gradient(#2eacff, #0191d9);
    background-image: -ms-linear-gradient(#2eacff, #0191d9);
    background-image: linear-gradient(#2eacff, #0191d9);
}
.contactList > li:nth-child(1):after {
    content: url("http://images1.wikia.nocookie.net/knd/images/3/3a/PR2.gif");
    text-align: top;
    width: 68px;
    height: 65px;
    background: #8dfd07;
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 15px;
    border-radius: 5px;
    border: solid 1px #aaa;
}
.contactList > li:nth-child(1):before {
    content: "";
    position: absolute;
    border-radius: 6px;
    width: 78px;
    height: 75px;
    background-color: white;
    line-height: 70px;
    /* Well see */
    text-align: top;
    border: solid 1px #aaa;
    top:...

JavaScript

$(document).ready(function () {
    //$("#contacts li:last-child").css('color','black');

    //$('#contacts li:odd').css({'border-left': '10px solid red'});
    //$('#contacts li:even').css({'border-left': '10px solid green'});
});