JSFiddle - React, Tailwind, and code Playground

by Igaojsfiddle

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<div class="frdList">
    <ul class="contactListHead">
        <li>
            <img src="http://images1.wikia.nocookie.net/knd/images/3/3a/PR2.gif" /><span>Friends :)</span>

        </li>
        <ul/>
        <div class="limit">
            <ul class="contactListBody">
                <li>
                    <img class="frdImage" src='http://vanillicon.com/600d6af0f320a021dc494cfa2daca569_50.png' /> <span class="frdName">#FriendName1</span>

                </li>
                <li>
                    <img class="frdImage" src='http://vanillicon.com/4bcdf6e53590d02a301a7d05c1296292_50.png' /> <span class="frdName">#FriendName2</span>

                </li>
                <li>
                    <img class="frdImage" src='http://vanillicon.com/77004ea213d5fc71acf74a8c9c6795fb_50.png' /> <span class="frdName">#FriendName3</span>

                </li>
                <li>
                    <img class="frdImage" src='http://vanillicon.com/26cae7718c32180a7a0f8e19d6d40a59_50.png' /> <span class="frdName">#FriendName4</span>

                </li>
                <li>
                    <img class="frdImage" src='http://vanillicon.com/26cae7718c32180a7a0f8e19d6d40a59_50.png' /> <span class="frdName">#FriendName4</span>

                </li>
            </ul>
        </div>
</div>

CSS

/* @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');
}
/* Reset CSS */
 body, div {
    margin: 0;
    padding: 0;
}
.frdList {
    height:500px;
    width:500px;
    margin:25px;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width:500px;
}
.contactListHead > li:nth-child(1) {
    text-align: center;
    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;
}
.contactListHead > li:nth-child(1) > span {
    font-weight: bold;
    font-family:'Amatic SC', cursive;
    font-size: 45px;
    color: #fff;
}
.contactListHead > li:nth-child(1) > img {
    position: absolute;
    top: -7px;
    left: 21px;
    border-radius: 5px;
    border:none;
    z-index: 3;
}
.contactListHead > 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);
}
.contactListHead > li:nth-child(1):after {
    content:"";
    text-align: center;
    width: 70px;
    height: 65px;
    background: #8dfd07;
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 15px;
    border-radius: 5px;
    border: solid 1px #aaa;
    z-index:2;
}
.contactListHead > li:nth-child(1):before {
   ...

JavaScript

$(document).ready(function () {
    //$("#contacts li:last-child").css('color','black');
    $('.contactListBody > li:odd').css({
        'border-left': '6px solid #ff3e3e '
    });
    $('.contactListBody > li:even').css({
        'border-left': '6px solid #8dfd07'
    });
    $('.contactListBody > li').on('dblclick', function () {
        //alert($(this).children("img").attr('src'));
        alert($(this).text());
    });
    $(".contactListBody li:last-child").css({
        'border-bottom-left-radius': '3px',
            'border-bottom-right-radius': '3px'
    });

});
$(function () {
    $('.limit').jScrollPane({
        hideFocus: true,
        mouseWheelSpeed: 50
    }
    //http://jscrollpane.kelvinluck.com/settings.html
    );
});