JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div id="connect">
              
                   
<ul class="icons">
    <li><a class="blogger" href="#blogger">test</a></li>
    <li><a class="linkdin" href="#linkd">test</a></li>
    <li><a class="facebook" href="#facebook">test</a></li>
    <li><a class="twitter" href="#twit">d</a></li>
</ul>
</div>

CSS

#connect ul.icons{
    list-style: none;
}
#connect ul.icons li a {
    text-indent: 35px;
    background-image: url('http://c3it.webuda.com/IMG/iconset.gif');
    width: 25px;
    height: 25px;
    display: block;
    margin:10px 0
}
#connect li a.blogger{background-position:25px 0px; }
#connect li a.blogger:hover{background-position:25px 25px;}

#connect li a.linkdin{background-position:75px 0px;}
#connect li a.linkdin:hover{background-position:75px 25px;}

#connect li a.facebook{background-position:100px 0px;}
#connect li a.facebook:hover{background-position:100px 25px;}

#connect li a.twitter{background-position:50px 0px;}
#connect li a.twitter:hover{background-position:50px 25px;}