JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<ul class="social-icons standard ">
<li class="twitter"><a href="http://www.twitter.com/manofmanytastes" target="_blank"><i class="fa fa-twitter"></i></a><iframe
  class="twitter-follow" src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi"
  style="width: 300px; height: 20px;"
  allowtransparency="true"
  frameborder="0"
  scrolling="no">
</iframe></li>
<li class="facebook"><a  href="http://www.facebook.com/manofmanytastes" target="_blank"><i class="fa fa-facebook"></i></a><iframe class="facebook-like" src="//wwww.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fmanofmanytastes&amp;width=150&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=604369196250500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowtransparency="true"></iframe></li>
<li class="instagram"><a href="http://instagram.com/http://instagram.com/manofmanytastes" target="_blank"><i class="fa fa-instagram"></i></a></li>
<li class="rss"><a href="http://feeds.feedburner.com/ManOfMany" target="_blank"><i class="fa fa-rss"></i></a></li>
</ul>

CSS

#header li.facebook iframe.facebook-like {
position: absolute;
top: -30px;
left: -27px;
}

.facebook-like{
    display:none;
}

.twitter-follow{
    display:none;
}

JavaScript

$(".facebook").hover(function(){$('.facebook-like').toggle()})
$(".twitter").hover(function(){$('.twitter-follow').toggle()})