JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<ul>
    <li class="user"><a href="#">User</a></li>
    <li class="vacancy"><a href="#">Vacancies</a></li>
    <li class="company"><a href="#">Company</a></li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul a {
    position: relative;
    padding-left: 20px;
    line-height: 16px;
}

ul a:after {
    background: url("http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg");
    position: absolute;
    content: " ";
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
}

.user a:after {
    background-position: -14px -10px;
}

.vacancy a:after {
    background-position: -53px -11px;
}

.company a:after {
    background-position: -93px -8px;
}