JSFiddle - React, Tailwind, and code Playground

HTML

<div id="social-grid">
        
        <ul class="social-top">
            <li class="social-flyout">Follow Me</li>
            <li class="facebook"><a href="http://facebook.com/theflyphoto"><span>facebook</span></a></li>
            <li class="twitter"><a href="http://twitter.com/theflyphoto"><span>twitter</span></a></li>
            <li class="dribble"><a href="http://facebook.com/theflyphoto"><span>dribble</span></a></li>
            <li class="tumblr"><a href="http://twitter.com/theflyphoto"><span>tumblr</span></a></li>
        </ul>    
        
                </div>

CSS

#social-grid{
    width: 245px;
    height: 35px;
    padding-left: 5px;
    border-left: 1px dotted #333;
    clear: left;
}

.social_flyout ul{
    text-decoration: none;
    color: #92c206;
    font: normal 300 .8em "museo",serif;
    float: left;
    display: inline;
}

#social-grid li{
    margin: 2px;
}

#social-grid li:hover{
    background-color: #0CBEB1;
}


.social-top{
    float: left;
    display: block;
    width: 225px;
    height: 45px;
    margin: 0;
}

.social-btm{
    float: left;
    display: block;
    width: 38px;
    height: 75px;
    margin: 0;
}
.social-top  {
    position: absolute;
}
.social-top .social-flyout{
padding-top: 3px;
width: 85px;
    float: left;
}

.social-top .facebook{
    background-image: url(http://theflyphoto.com/images/facebook.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    float: left;
    background-color: #92c206;
    text-indent: -9999px;
    
}

.social-top .twitter{
    background-image: url(http://theflyphoto.com/images/twitter.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    float: left;
    background-color: #92c206;
    text-indent: -9999px;
    
}

.social-top .dribble{
    background-image: url(http://theflyphoto.com/images/dribble.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    float: left;
    background-color: #92c206;
    text-indent: -9999px;
    
}
.social-top .tumblr{
    background-image: url(http://theflyphoto.com/images/tumblr.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    float: left;
    background-color: #92c206;
    text-indent: -9999px;
    
}

JavaScript

$('.social-top li:not(.social-flyout)').hover(function() {
        $('.social-top').animate({
            right: 0
        },"fast"
        );
    });