JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<ul class="menu_nav_left">
    <li><a class="popular" href="#">Popular now</a></li>
    <li><a class="icon active icon-home" href="index.html">Home</a></li>
    <li><a class="icon icon-grosing" href="#">Grosing</a></li>
    <li><a class="icon icon-comedy" href="comedy.html">Comedy</a></li>
    <li><a class="icon icon-music" href="music.html">Music</a></li>
    <li><a class="icon icon-technology" href="technology.html">Technology</a></li>
    <li><a class="icon icon-sport" href="#">Sport</a></li>
    <li><a class="icon icon-animals" href="#">Animals</a></li>
    <li><a class="icon icon-extreme" href="extreme.html">Extreme</a></li>
</ul>

CSS

.menu_nav_left {
    position: relative; 
}
.menu_nav_left li {float: left;}
.menu_nav_left li a {
    width: 162px;
    height: 25px;
    display: block;
    padding: 5px 4px;
    margin-bottom: 5px;
    background:url(http://orio.tv/images/icons_menu.png);
    background-repeat: no-repeat;
}
.icon-home:before {background-position: -6px -40px}
.icon.active.icon-home, .icon.active.icon-home:hover { background-position: 12px -300px; color: red;}
.icon.icon-grosing:before {background-position: -5px -71px}
.icon.active.icon-grosing, .icon.active.icon-grosing:hover { background-position: 13px -331px; color: red;}