JSFiddle - React, Tailwind, and code Playground

by ozgurgorgulu

HTML

<ul id="soldasosyalpaylasimog">
	<li id="facebook"><a href="http://ozgurgorgulu.blogspot.com/"><img src="http://img.webme.com/pic/5/5426/solfacebook.png" alt="/"/></a></li>
	<br/>
	<li id="twitter"><a href="http://ozgurgorgulu.blogspot.com/"><img src="http://img.webme.com/pic/5/5426/soltwitter.png" alt="/"/></a></li>
	<br/>
	<li id="youtube"><a href="http://ozgurgorgulu.blogspot.com/"><img src="http://img.webme.com/pic/5/5426/solyoutube.png" alt="/"/></a></li>
	<br/>
	<li id="googleplus"><a href="http://ozgurgorgulu.blogspot.com/"><img src="http://img.webme.com/pic/5/5426/solgoogle.png" alt="/"/></a></li>
	<br/>
	<li id="eposta"><a href="http://ozgurgorgulu.blogspot.com/"><img src="http://img.webme.com/pic/5/5426/solposta.png" alt="/"/></a></li>
</ul>

CSS

#soldasosyalpaylasimog{position:fixed;top:130px;left:0;list-style:none;background:#2a2a2a;-webkit-border-top-right-radius:6px;-moz-border-top-right-radius:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-bottom-right-radius:6px;border-bottom-right-radius:6px;-webkit-box-shadow:#888 7px 0 10px -5px;-moz-box-shadow:#888 7px 0 10px -5px;box-shadow:#888 7px 0 10px -5px;border-color:#777 #888 #999;border-style:solid;border-width:2px 2px 2px 0;padding:10px}
#soldasosyalpaylasimog li a{display:block;background-repeat:no-repeat;background-position:top left}
#soldasosyalpaylasimog li a img{-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;background-repeat:no-repeat;border:none!important}
#soldasosyalpaylasimog li a:hover img{opacity:0}
#soldasosyalpaylasimog li a:active img{opacity:1}
#twitter{background-image:url(http://img.webme.com/pic/5/5426/twitterog.png) no-repeat}
#facebook{background-image:url(http://img.webme.com/pic/5/5426/facebookog.png) no-repeat}
#youtube{background-image:url(http://img.webme.com/pic/5/5426/youtubeog.png) no-repeat}
#rss{background-image:url(http://img.webme.com/pic/5/5426/rssog.png) no-repeat}
#googleplus{background-image:url(http://img.webme.com/pic/5/5426/googleplusog.png) no-repeat}
#eposta{background-image:url(http://img.webme.com/pic/5/5426/postaog.png) no-repeat}