JSFiddle - React, Tailwind, and code Playground

by kompiajaib

HTML

<div id='widget-social'>
<ul class='kompisocial'>
<li class='blogicon'>
<a href='http://www.blogger.com/follow-blog.g?blogID=2583045784323695327' target='_blank' title='Follow This Blog'>Follow This Blog</a>
</li><li class='emailicon'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=kompiajaib' target='_blank' title='Subscribe by Email'>Email</a>
</li><li class='rssicon'>
<a href='http://feeds.feedburner.com/KompiAjaib' target='_blank' title='Subscribe by RSS'>RSS</a>
</li><li class='gicon'>
<a href='https://plus.google.com/u/0/117950600521728942551' target='_blank' title='Follow on Google+'>Google Plus</a>
</li><li class='fbicon'>
<a href='http://www.facebook.com/pages/Kompi-Ajaib/395526477133955' target='_blank' title='Like on Facebook'>Facebook</a>
</li><li class='twicon'>
<a href='http://twitter.com/kompiajaib' target='_blank' title='Follow on Twitter'>Twitter</a>
</li>
</ul>
</div>

CSS

#widget-social{padding:0;margin:0 auto}
ul.kompisocial{border:0;list-style:none;overflow:hidden;margin:10px}
.kompisocial li{float:right;background:none!important;margin:0 7px;padding:0!important}
.kompisocial li a {display:block;width:32px;height:32px;background:url(http://1.bp.blogspot.com/-F2YUJPGQhRo/Uawdnglej5I/AAAAAAAAYuQ/0Xu1jqZhqgg/s1600/social2.png) no-repeat transparent;text-indent:-99999em!important}
.kompisocial li a:hover{padding:0!important}
.kompisocial li.blogicon a{background-position:-210px 0;transition:all 400ms ease-in-out}
.kompisocial li.emailicon a{background-position:-168px 0;transition:all 400ms ease-in-out}
.kompisocial li.rssicon a{background-position:-126px 0;transition:all 400ms ease-in-out}
.kompisocial li.gicon a{background-position:-84px 0;transition:all 400ms ease-in-out}
.kompisocial li.fbicon a{background-position:-42px 0;transition:all 400ms ease-in-out}
.kompisocial li.twicon a{background-position:0 0;transition:all 400ms ease-in-out}
.kompisocial li.blogicon a:hover{background-position:-210px -42px}
.kompisocial li.emailicon a:hover{background-position:-168px -42px}
.kompisocial li.rssicon a:hover{background-position:-126px -42px}
.kompisocial li.gicon a:hover{background-position:-84px -42px}
.kompisocial li.fbicon a:hover{background-position:-42px -42px;}
.kompisocial li.twicon a:hover{background-position:0 -42px}