JSFiddle - React, Tailwind, and code Playground

by Burak Şahin

HTML

<a href="#">
    <div class="sosyal fb"></div>
</a>

<a href="#">
    <div class="sosyal tw"></div>
</a>

<a href="#">
    <div class="sosyal gp"></div>
</a>
<a href="#">
    <div class="sosyal rss"></div>
</a>

CSS

.sosyal {
    margin:5px 0 0 0;
    padding:0;
    float:left;
    width:32px;
    height:32px;
    margin-right:5px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.sosyal:hover {
    background-position:0 32px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.fb {
    background-image:url(http://bsahin.net/wp-content/uploads/2013/02/fb-copy.png);
}
.tw {
    background-image:url(http://bsahin.net/wp-content/uploads/2013/02/tw.png);
}
.gp {
    background-image:url(http://bsahin.net/wp-content/uploads/2013/02/googleplus.png);
}
.rss {
    background-image:url(http://bsahin.net/wp-content/uploads/2013/02/rss.png);
}