JSFiddle - React, Tailwind, and code Playground

by Burak Şahin

HTML

<div id="sosyal-medya">
	<ul>
		<a href="http://facebook.com/hawksonLY"><li id="fb">FACEBOOK<div></div></li></a>
		<a href="http://twitter.com/BurakSahin59"><li id="tw">TWITTER<div></div></li></a>
		<a href="http://pinterest.com/BurakSahin59"><li id="pin">PINTEREST<div></div></li></a>
		<a href="http://gplus.to/BurakSahin"><li id="gplus">GOOGLE+<div></div></li></a>
		<a href="http://web.stagram.com/n/buraksahin59/"><li id="ins">INSTAGRAM<div></div></li></a>
		<a href="http://www.flickr.com/photos/62403917@N08/"><li id="flickr">FLICKR<div></div></li></a>
		<a href="http://tr.linkedin.com/pub/burak-şahin/5a/67b/55a/"><li id="in">LINKEDIN<div></div></li></a>
		<a href="http://feeds.feedburner.com/BurakSahin"><li id="rss">RSS<div></div></li></a>
	</ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);
#sosyal-medya {font-family: 'Roboto Condensed', sans-serif;}
#sosyal-medya ul {margin-left: -40px;}
#sosyal-medya ul a {color: #fff;text-decoration: none;}
#sosyal-medya ul a li {float: left;list-style: none;height: 58px;width: 68px;margin: 3px 3px 0 0;text-align: center;font-size: 12px;background: #2c2c2c;display: block;    -webkit-transition: all .4s ease;-moz-transition: all .4s ease;transition: all .4s ease;padding: 9px 0 0 0;}
#sosyal-medya ul a li div {background-image: url(http://bsahin.net/wp-content/uploads/2013/02/sprite-sosyal1.png);margin:5px 0 0 26px;height: 15px;width: 15px;}
li#fb:hover {background: #38589f}
li#tw:hover {background: #44b0e3}
li#pin:hover {background: #cb2229}
li#gplus:hover {background: #cd4132}
li#ins:hover {background: #d2c3ac}
li#flickr:hover {background: #ff0085}
li#in:hover {background: #64b7d2}
li#rss:hover {background: #f8bc2d}
li#fb div {background-position: 0 0;}
li#tw div {background-position: 0 -16px;}
li#pin div {background-position: 0 -117px;}
li#gplus div {background-position: 0 -99px;}
li#ins div {background-position: 0 -64px;}
li#flickr div {background-position: 0 -84px;}
li#in div {background-position: 0 -49px;}
li#rss div {background-position: 0 -32px;}