JSFiddle - React, Tailwind, and code Playground

by ScottRippey

HTML

<ul id="nav-main">
    <li class="main-link home"><a href="#">Home</a></li>
    <li class="main-link cc"><a href="#">Complete Care</a></li>
    <li class="main-link poe"><a href="#">POE</a></li>
    <li class="main-link pos"><a href="#">POS</a></li>
    <li class="main-link ib"><a href="#">In Basket</a></li>
    <li class="main-link pie"><a href="#">PIE</a></li>
    <li class="main-link ppm"><a href="#">PPM</a></li>
    <li class="main-link proj"><a href="#">Projects</a></li>
    <li class="main-link rep"><a href="#">Reports</a></li>
    <li class="main-link surv"><a href="#">Survey</a></li>
    <li class="main-link ds"><a href="#">Decision Support</a></li>
</ul>

CSS

.main-link {
    background: url(//lorempixel.com/400/400) no-repeat 0px 0px;
}
.main-link.home:hover { background-position: -0px -77px; }
.main-link.cc:hover { background-position: -10px -77px; }
.main-link.poe:hover { background-position: -20px -77px; }
.main-link.pos:hover { background-position: -30px -77px; }
.main-link.ib:hover { background-position: -40px -77px; }
.main-link.pie:hover { background-position: -50px -77px; }
.main-link.ppm:hover { background-position: -60px -77px; }
.main-link.proj:hover { background-position: -70px -77px; }
.main-link.rep:hover { background-position: -80px -77px; }
.main-link.surv:hover { background-position: -90px -77px; }
.main-link.ds:hover { background-position: -100px -77px; }