JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div id="social-button"> <a href="#" id="social-button1"></a>
 <a href="#" id="social-button2"></a>
 <a href="#" id="social-button3"></a>
 <a href="#" id="social-button4"></a>

</div>

CSS

#social-button {
    height: 32px;
    float: right;
    margin-right: 30px;
    margin-top: 65px;
}
#social-button > a {
    width: 33px;
    height: 33px;
    margin-right: 10px;
    float: left;
    background-image: url(http://images.vfl.ru/ii/1415566887/af348d7d/6896895.png);
    background-repeat: no-repeat;
}
#social-button1 {
    background-position: 0 0;
}
#social-button2 {
    background-position: -37px 0;
}
#social-button3 {
    background-position: -74px 0;
}
#social-button4 {
    background-position: -111px 0;
    margin-right: 0 !important;
}