JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="menu-layout">
    <ul class="  tab-menu">
        <li class="active"> <a class="icon-user" href="#"></a>

        </li>
        <li> <a class="icon-envelope" href="#"></a>

        </li>
        <li> <a class="icon-ok" href="#"></a>

        </li>
        <li> <a class="icon-pencil" href="#"></a>

        </li>
        <li> <a class="icon-picture" href="#"></a>

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

CSS

* {
    color: rgb(92, 92, 92);
}
a, a:hover {
    text-decoration:none;
}
a {
    color: rgb(170, 170, 170);
}
a:hover {
    color: rgb(92, 92, 92);
}
.menu-layout {
    height:40px;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #dbdada;
    text-align:center;
    font-size: 20px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#00ffffff', GradientType=0);
    background-color:#e6e6e6;
    margin-top: 10px;
}
.tab-menu {
    list-style-type:none;
    display: inline-block;
    margin-bottom: 0px;
}
.tab-menu > li {
    float:left;
    height:40px;
    margin-top: -1px;
    padding: 5px 10px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.tab-menu > li.active {
    background: #dddddd;
    box-shadow: inset 0 1px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -1px rgba(255, 255, 255, 0.6), 1px 0 rgba(255, 255, 255, 0.6), -1px 0 rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: inset 0 1px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -1px rgba(255, 255, 255, 0.6), 1px 0 rgba(255, 255, 255, 0.6), -1px 0 rgba(255, 255, 255, 0.6);
    -mox-box-shadow: inset 0 1px 6px -1px rgba(0, 0, 0, 0.4), inset 0 -1px rgba(255, 255, 255, 0.6), 1px 0 rgba(255,...

JavaScript

$('li').click(
function () {
    //remove all other active classes
    $('li').removeClass("active");
    //now add active to selected li
    $(this).addClass("active");
});