JSFiddle - React, Tailwind, and code Playground

HTML

<div id='social_networks'>
<ul><!--Social Icons Started Started-->
  <li class='sorting-01 facebook'><a href='#'><span class='inv'>Facebook</span></a></li>
<!--Replase With Facebook URL-->
<li class='sorting-03 twitter'><a href='#'><span class='inv'>twitter</span></a></li>
<!--Replase With Twitter URL-->
<li class='sorting-02 googleplus'><a href='#'><span class='inv'>googleplus</span></a></li>
<!--Replase With Google Plus URL-->
<li class='sorting-05 linkedin'><a href='#'><span class='inv'>linkedin</span></a></li>
<!--Replase With linkedin URL-->
<li class='sorting-10 youtube'><a href='#'><span class='inv'>youtube</span></a></li>
<!--Replase With Youtube URL-->
<li class='sorting-06 flickr'><a href='#'><span class='inv'>flickr</span></a></li>
<!--Replase With Flicker URL-->
<li class='sorting-04 vimeo'><a href='#'><span class='inv'>vimeo</span></a></li>
<!--Replase With Vimeo URL-->
<li class='sorting-05 deviantart'><a href='#'><span class='inv'>deviantart</span></a></li>
<!--Replase With Deviant ART URL-->
</ul><!--Social Icons Started End-->
</div>
<div class='clear'/>

CSS

/* CSS Social Network */
#social_networks{width:100%;background:#000;border-bottom:5px solid #0BAA97;border-top:5px solid #C7F3B6;float:left;display:block;padding-right:0%;}
#social_networks ul {background:#000;display:block;float:right;height:32px;margin:0 auto;padding:5px;}
#social_networks li{display:inline-block;float:right;width:32px;height:32px;
opacity:0.6;background-position:left top;transition:All 0.4s ease;}
#social_networks li:hover{opacity:1;background-position:left -32px;}
#social_networks li a{display:inline-block;width:32px;height:32px;}
#social_networks li a:hover{background:transparent;color:#ddd;box-shadow:none;}
#social_networks li a span{display:none;}
#social_networks li.facebook{background-image:url(http://3.bp.blogspot.com/-9ou8A7WFiy0/U17P3ExpUWI/AAAAAAAACgQ/yb_QKEjM0JM/s1600/social_network_facebook.png);}
#social_networks li.twitter{background-image:url(http://4.bp.blogspot.com/-hFVGbhzmOiY/U17P_E_LdqI/AAAAAAAAChE/V5NhA_lyVtA/s1600/social_network_twitter.png);}
#social_networks li.linkedin{background-image:url(http://1.bp.blogspot.com/-G3bPnh1ejd0/U17P59mbfkI/AAAAAAAACgk/FOq0SQIvSek/s1600/social_network_linkedin.png);}
#social_networks li.tumblr{background-image:url(http://4.bp.blogspot.com/--Zlo0ilxuDQ/U17P8Y5PujI/AAAAAAAACg4/yKvIPjlF2ZU/s1600/social_network_tumblr.png);}
#social_networks li.vimeo{background-image:url(http://4.bp.blogspot.com/-yn2yMPvZIJA/U17P_F8YjyI/AAAAAAAAChI/LIoHupBsJUg/s1600/social_network_vimeo.png);}
#social_networks li.skype{background-image:url(http://4.bp.blogspot.com/-H6kgTdMNhNY/U17P8A0MezI/AAAAAAAACg0/F18xPYtnprM/s1600/social_network_skype.png);}
#social_networks li.youtube{background-image:url(http://3.bp.blogspot.com/-OCKvKbUveko/U17P_lFFnAI/AAAAAAAAChU/18MDanegwXc/s1600/social_network_youtube.png);}
#social_networks li.myspace{background-image:url(http://4.bp.blogspot.com/-4VdqQv66nE8/U17P71j6EiI/AAAAAAAACgs/qPzYDRFvEIM/s1600/social_network_myspace.png);}
#social_networks...