JSFiddle - React, Tailwind, and code Playground

by satistayiz

HTML

<div id="sag"> <div class="sosyal"><a href="http://blogeklentin.blogspot.com/" _fcksavedurl="http://blogeklentin.blogspot.com/" title="Facebook'ta ben"><span class="buton fb"><span class="goster">Facebook'ta ben</span></span></a><a href="http://blogeklentin.blogspot.com/" _fcksavedurl="http://blogeklentin.blogspot.com/" title="Twitter'da ben"><span class="buton tw"><span class="goster">Twitter'da ben</span></span></a><a href="http://blogeklentin.blogspot.com/" _fcksavedurl="http://blogeklentin.blogspot.com/" title="Google+'da ben"><span class="buton gp"><span class="goster">Google+'da ben</span></span></a><a href="http://blogeklentin.blogspot.com/" _fcksavedurl="http://blogeklentin.blogspot.com/" title="Linkedin'de ben"><span class="buton in"><span class="goster">Linkedin'de ben</span></span></a></div> </div>





<a class="button add" href="http://blogeklentin.blogspot.com/">BlogEklentin'e Dön</a>

CSS

#alt {min-height:20px;background:#3a3a3a;margin-top:10px;border-top:2px solid #1c7b30;color:#f2f2ff;padding:5px;} #alt .sol {float:left;width:50%;} #alt .sag {float:right;width:50%;text-align:right} #alt a {color:#fff} .sosyal {margin-bottom:20px;display:block;overflow:hidden;position:relative;} .sosyal .buton {width: 26px; height: 26px;display:block;float:left;margin-right:10px;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-o-transition: all 0.5s;} .sosyal .fb {background:url(http://f1209.hizliresim.com/11/2/ck953.png) no-repeat -47px -13px;} .sosyal .tw {background: url(http://f1209.hizliresim.com/11/2/ck953.png) no-repeat -82px -13px;} .sosyal .gp {background: url(http://f1209.hizliresim.com/11/2/ck953.png) no-repeat -10px -13px;} .sosyal .in {background: url(http://f1209.hizliresim.com/11/2/ck953.png) no-repeat -115px -13px;}  .sosyal .fb:hover {background:url(http://f1209.hizliresim.com/11/2/ck953.png) no-repeat -47px -55px;} .sosyal .tw:hover {background: url(http://f1209.hizliresim.com/11/2/ck953.png) no-repeat -82px -55px;} .sosyal .gp:hover {background: url(http://f1209.hizliresim.com/11/2/ck953.png) no-repeat -10px -55px;} .sosyal .in:hover {background: url(http://f1209.hizliresim.com/11/2/ck953.png) no-repeat -115px -55px;} .sosyal .goster {display:none;position:absolute;left:150px;font-weight:bold;} .sosyal .buton:hover  .goster {display:block;} .sosyal .goster  {color:#3a3a3a} p.comment-subscription-form {display:none;}





.button
{        
	display: inline-block;
	white-space: nowrap;
	background-color: #ccc;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	background-image: -webkit-linear-gradient(top, #eee, #ccc);
	background-image: -moz-linear-gradient(top, #eee, #ccc);
	background-image: -ms-linear-gradient(top, #eee, #ccc);
	background-image: -o-linear-gradient(top, #eee, #ccc);
	background-image: linear-gradient(top, #eee, #ccc);
	filter:...