JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <p class="nav-extra">
        <a title="Follow me on Twitter" class="nav-extra twitter" href="http://twitter.com/webdesignmash" style="margin-top: 0px;"><span>Follow me on Twitter</span></a>
        <a title="RSS Feeds" class="nav-extra rss" href="http://www.webdesignmash.com/feed/" style="margin-top: 0px;"><span>RSS Feeds</span></a>
    </p>
</div>

CSS

#header{margin-top:40px;}
#header a.rss {
    background: url("http://www.webdesignmash.com/wp-content/themes/wdm612theme/images/nav-icons.png") no-repeat scroll right top transparent;
}
#header a.twitter {
    background: url("http://www.webdesignmash.com/wp-content/themes/wdm612theme/images/nav-icons.png") no-repeat scroll left top transparent;
}
#header a.nav-extra {
    display: block;
    float: left;
    height: 36px;
    margin-left: 6px;
    width: 64px;
}
#header a.nav-extra span {
    display: none;
}

JavaScript

$('#header .nav-extra a').hover(function(){
    $(this).animate({marginTop:'-18px'});
},function(){
    $(this).animate({marginTop:'0px'});
});