JSFiddle - React, Tailwind, and code Playground

by ozgurgorgulu

HTML

<ul id="ucanyanmenu" class="ucanmenu">

<li><a href="#" class="simge-sosyalaglarim" title="Sosyal Ağlarım"></a>
<!------------------------------------------------------------------------------------------------------------------------------->
<ul><li class="ucanmenu-baslik"><a href="#">Sosyal Ağlarım</a></li>

<li><a href="http://ozgurgorgulu.blogspot.com/" target="_blank" class="simge-facebook">Facebook</a></li>

<li><a href="http://ozgurgorgulu.blogspot.com/" target="_blank" class="simge-twitter">Twitter</a></li>

<li><a href="http://ozgurgorgulu.blogspot.com/" target="_blank" class="simge-googleplus">Google +</a></li>

<li><a href="http://ozgurgorgulu.blogspot.com/" target="_blank" class="simge-youtube">YouTube</a></li>
</ul></li>
<!------------------------------------------------------------------------------------------------------------------------------->
<li><a href="#" class="simge-sayfayibegen" title="Sayfayı Beğen"></a>
<ul>
<li class="ucanmenu-baslik"><a href="#">Sayfayı Beğen</a></li>

<li><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FOzgurSakarya54&amp;width=180&amp;height=250&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=none&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:180px; height:250px;" allowTransparency="true"></iframe></li>

</ul>
</li>
<!------------------------------------------------------------------------------------------------------------------------------->
<li><a href="#" class="simge-tweetbox" title="Tweetler"></a>
<ul>
<li class="ucanmenu-baslik"><a href="#">Tweetler</a></li>

<li><style type="text/css">.FB_SERVER_IFRAME{width: 180px !important;height: 250px !important;}</style><div class="textwidget"><script type="text/javascript" src="http://ozgurgorgulu.net76.net/js/tweetbox.js"></script>
<div id="twitterfanbox"><script...

CSS

.ucanmenu,.ucanmenu *{border:0;outline:0;font-family:Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;color:#555;vertical-align:baseline;margin:0;padding:0}
.ucanmenu,.ucanmenu > li > ul{list-style-type:none}
.ucanmenu{position:fixed;top:25%;left:0;background-color:rgba(240,240,240,0.75);border:1px solid #b7b7b7;border-left:none;border-top-right-radius:2px;border-bottom-right-radius:2px;box-shadow:0 0 5px #ccc;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;width:25px;overflow:visible;z-index:9999}
.ucanmenu-right{left:auto;right:0;border-right:none;border-left:1px solid #b7b7b7}
.ucanmenu > li{position:relative;border-bottom:1px solid #f7f7f7;border-right:1px solid #f7f7f7;border-top:1px solid #ccc}
.ucanmenu > li > a{display:block;width:16px;height:16px;margin-left:0;background-color:rgba(240,240,240,0.75);background-position:4px 4px;background-repeat:no-repeat;padding:4px}
.ucanmenu > li > ul{display:none;position:absolute;left:25px;top:-2px;width:180px;overflow:hidden;background-color:rgba(240,240,240,0.75);border:1px solid #b7b7b7;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;box-shadow:0 0 5px #ccc;-moz-box-shadow:0 0 5px #ccc;-webkit-box-shadow:0 0 5px #ccc;z-index:95}
.ucanmenu-right > li > ul{left:auto;right:25px}
.ucanmenu > li > ul:nth-child(3){left:206px}
.ucanmenu > li > ul:nth-child(4){left:387px}
.ucanmenu > li > ul:nth-child(5){left:568px}
.ucanmenu > li > ul:nth-child(6){left:749px}
.ucanmenu > li > ul:nth-child(7){left:930px}
.ucanmenu-right > li > ul:nth-child(3){left:auto;right:206px}
.ucanmenu-right > li > ul:nth-child(4){left:auto;right:387px}
.ucanmenu-right > li > ul:nth-child(5){left:auto;right:568px}
.ucanmenu-right > li > ul:nth-child(6){left:auto;right:749px}
.ucanmenu-right > li > ul:nth-child(7){left:auto;right:930px}
.ucanmenu > li:hover > ul{display:block;float:left}
.ucanmenu.ucanmenu-js > li:hover > ul{display:none}
.ucanmenu > li > ul > li{border-bottom:1px solid...

JavaScript

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(5($){$.13.3=5(h){b B={l:17,m:\'14\',s:\'H\',C:\'n\'},c={J:5(X){k 4.G(5(){b $3=$(4);b 7=$.Z({},B,X);6(!$3.I(\'3\'))$3.t(\'3\');6(7.C==\'d\')$3.t(\'3-d\');6(7.s==\'1i\')7.s=\'1k 1f\';$3.t(\'3-1b\').g({\'D\':7.l?\'F\':\'1c\',\'f\':7.l?(($(8).9()-$3.9())/2):(($(8).9()-$3.9())/2)+$(8).w()}).E(\'a[1l="#"]\').V(\'H\',5(e){e.1e()}).1d().R(\'Q\').R(\'a\').V(7.s,5(){6($(4).P().I(\'3-r\'))k U;c.o();$(4).1g(\'<u 1j="3-Y"></u>\').P().G(5(){$(4).g({\'j-n\':\'q\',\'j-d\':\'q\',\'v\':0,\'D\':\'F\',\'f\':0}).1h();b A=$(4).9()+$(4).19().f;b z=$(8).9()+$(8).w();b y=0;6(A>z){y=O($(4).g(\'f\'),10)-(A-z)}$(4).g({\'f\':y}).l({\'j-n\':\'S\',\'j-d\':\'S\',\'v\':1.0},W)}).t(\'3-r\');k U});6($.15.18||7.m!=B.m){16(b i=2;i<10;i++){b p=1a+i+(O(7.m,10)*(i-2));b x=\'N\';6(7.C==\'d\'){x=p;p=\'N\'}$3.E(\'Q\').E(\'1F:1E-1D(\'+i+\')\').g({\'n\':p,\'d\':x,\'1L\':7.m})}}})},K:5(){$(\'.3\').G(5(){6($(4).g(\'D\')==\'F\'){$(4).1A().l({\'f\':($(8).9()/2-$(4).9()/2)+$(8).w()},1q)}L{$(4).g({\'f\':($(8).9()/2-$(4).9()/2)})}})},o:5(){$(\'.3-r\').l({\'j-n\':\'q\',\'j-d\':\'q\',\'v\':0},W,5(){$(4).1w(\'3-r\').o()});$(\'u.3-Y\').1v()}};$(8).1C(5(){c.K()});$(8).1u(5(){c.K()});$(1x).H(5(e){6($(e.1s).1r().I(\'3\'))k;c.o()});6(c[h]&&h.1B()!=\'J\'){k c[h].M(4,1J.1H.1G.1m(T,1))}L 6(11 h===\'12\'||!h){k c.J.M(4,T)}L{$.1z(\'1t "\'+h+\'" 1y 1o 1n 1I...