JSFiddle - React, Tailwind, and code Playground

by homeblogger

HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social_fix'>
<div class='social_txt'><span>:شارك التدوينة </span>
<ul class='social_menu' id='social_menu_animation'>
<li class='abfacebook'>
<a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;   ' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='&quot;   http://twitter.com/home?status=&quot;   + data:post.title + &quot;   -- &quot;   + data:post.url' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot;   + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow' title='Share this on Google+'><strong>Google+</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot;   + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' rel='nofollow' title='Share This on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='abdig'>
<a expr:href='&quot;   http://digg.com/submit?phase=2&amp;   url=&quot;   + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='abpinterest'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot;   + data:post.url + &quot;   &amp;   media=&quot;   + data:post.thumbnailUrl + &quot;   &amp;   description=&quot;   + data:post.title' rel='nofollow' title='Share This on Pinterest'><strong>Pinterest</strong></a>
</li>
<li...

CSS

/*Social Sharing Widget
----------------------------------------------- */
.social_fix {
margin:10px 0 0!important;
padding:10px!important;
border:1px solid #DDD;
background:#fff;
}
.social_txt span {
float:right;
font-size:150%;
text-transform:uppercase;
font-family:Oswald,sans-serif;
font-weight:normal;
padding:5px!important;
background:#333;
margin-left:5px!important;
color:#ffffff
}
ul.social_menu {
list-style:none;
display:inline-block;
margin:0 0 0 10px!important
}
ul.social_menu li {
display:inline;
float:right;
background-repeat:no-repeat
}
ul.social_menu li a {
display:block;
width:40px;
height:33px;
padding-left:10px!important;
position:relative;
text-decoration:none
}
ul.social_menu li a strong {
font-weight:400;
position:absolute;
right:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px!important
}
ul.social_menu li.abfacebook {
background-image:url(http://2.bp.blogspot.com/-5gmEwOZfljk/Uf0xiY7xwoI/AAAAAAAAXjA/c4rjTtd_YF0/s320/facebook.png) }
ul.social_menu li.abtwitter {
background-image:url(http://4.bp.blogspot.com/-_Mb8tq_JIJ0/Uf0xj_ui2KI/AAAAAAAAXjo/1l_nwJbjpM8/s320/twitter.png)}
ul.social_menu li.abgoogleplus {
background-image:url(http://3.bp.blogspot.com/-nNBNNBr4ams/Uf0xia-RviI/AAAAAAAAXjE/ao0oltYtuO8/s320/gplus2.png)
}
ul li.abpinterest {
background-image:url(http://3.bp.blogspot.com/-8fqAb30zIac/Uf0xjElI14I/AAAAAAAAXjc/K-KLc29kYcE/s320/pinterest.png)
}
ul.social_menu li.abstumbleupon {
background-image:url(http://2.bp.blogspot.com/-DsNwRSbf1EQ/Uf0xjfzSqWI/AAAAAAAAXjY/yRVkwo0Yrp8/s320/stumbleupon.png)}
ul.social_menu li.abdig {
background-image:url(http://1.bp.blogspot.com/-fbtDwboVFY4/Uf0xibEjueI/AAAAAAAAXjI/CfEJo3dmcUY/s320/digg.png)}
ul.social_menu li.ablinkedin...