JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-contact" class="right">
    <div id="main-social">
        <a href="#!" alt="Company - Facebook" class="left fb">facebook</a>
        <a href="#!" alt="Company - Twitter" class="left tw">twitter</a>
        <a href="#!" alt="Company - LinkedIn" class="left li">linkedin</a>
        <a href="#!" alt="Company - Word Press" class="left wp">Wordpress</a>               
    </div>
</div>

CSS

#main-social a {
    width:  50px;
    height: 50px;
    display: inline-block;
    text-indent:-1000px;
    overflow:hidden;
    background-position: left top;
}
#main-social a.fb {
    background-image: url('http://placehold.it/50x100&text=fb');
}
#main-social a.tw {
    background-image: url('http://placehold.it/50x100&text=tw');
}
#main-social a.li {
    background-image: url('http://placehold.it/50x100&text=fb');
}
#main-social a.wp {
    background-image: url('http://placehold.it/50x100&text=wp');
}
#main-social a:hover, #main-social a.active {
    background-position: left bottom!important;
}