JSFiddle - React, Tailwind, and code Playground

by MattStrange

HTML

<div id="nav">
    <ul>
        <li><span class="icon1"></span>Some Text</li>
        <li><span class="icon2"></span>Some Text</li>
        <li><span class="icon3"></span>Some Text</li>
        <li><span class="icon4"></span>Some Text</li>
    </ul>
</div>

<br />

<img src="http://lifeofstrange.com/fade/sprites.png">

CSS

#nav{
    display:block;
    background: #eee;
    float: left;
    padding: 25px;
}
#nav ul {
    float: left;
    list-style:none;
    margin-top: 0;
    padding-left: 0;
    margin-bottom: 0;
}
#nav ul li {
    float: left;
    text-transform: uppercase;
    font: 10px Arial;
    color: #515151;
    margin-right: 25px;
}
span {
    background: url('http://lifeofstrange.com/fade/sprites.png') no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
}

.icon2 {
    background-position: -32px 0;
}
.icon3 {
    background-position: -64px 0;
}
.icon4 {
    background-position: -96px 0;
}