JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav-tt">
<li><a class="twitter" href="#" target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href="#" target="_blank"><span>Google Plus</span></a></li>
<li><a class="facebook" href="#" target="_blank"><span>Facebook</span></a></li>
<li><a class="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href="#" target="_blank"><span>Tumblr</span></a></li>
<li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li>
<li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li>
<li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li>
	</ul>

CSS

.nav-tt{
 padding: 50;
 width: 70%;
 height: 70px;
 margin: 80px auto 30px auto;
 
}
.nav-tt li{
 float: left;
 list-style: none;
}
.nav-tt li a{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 2px;
    outline: none;
 position: relative;
 z-index: 2;
    text-indent: -9000px;
    text-decoration: none;
}
.nav-tt li .gplus{
    background: url(https://lh4.googleusercontent.com/-4cFkVuK-J9o/UHxDNROuW2I/AAAAAAAAElY/abNRRK-8Qqc/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
    background: url(https://lh4.googleusercontent.com/-wfBGqdU25u0/UHxDPNm_SgI/AAAAAAAAEl4/7k_oJBtjSJY/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
    background: url(https://lh3.googleusercontent.com/-qyf8onE2vGQ/UHxDOOke6YI/AAAAAAAAElo/2fVKKCD2Kvw/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
    background: url(https://lh6.googleusercontent.com/-MJZ3ppOsD3g/UHxDNlVHuxI/AAAAAAAAElg/k8f5b_DVM4E/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
    background: url(https://lh5.googleusercontent.com/-2-olf15YoqY/UHxDNzIdb1I/AAAAAAAAElk/5kHZeTBfdlA/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
    background: url(https://lh5.googleusercontent.com/-6rP4L0v2_68/UHxDO2hBAJI/AAAAAAAAEls/tm1r69EhCRw/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
 background: url(https://lh5.googleusercontent.com/-X49px-YaEfY/UHxDPEPM7DI/AAAAAAAAEl0/230Z4oxHNzE/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
 background: url(https://lh4.googleusercontent.com/-Z4beVXz8HJI/UHxDNbnCR2I/AAAAAAAAElU/BfBkHDhqkd8/s32/email.png) no-repeat;
}
.nav-tt li .rss{
 background: url(https://lh4.googleusercontent.com/-_EyfM2ruhco/UHxDOsct_rI/AAAAAAAAEl8/GuByt66SWxk/s128/rss.png) no-repeat;
}
.nav-tt li a span{
 width: 80px;
 height: 80px;
 line-height: 80px;
 padding: 10px;
 left: 50%;
 margin-left: -60px;
 font-family: 'Alegreya SC', Georgia, serif;
 font-weight: 400; 
 font-style: italic;
 font-size: 14px;
 color: #719DAB;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
...