JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div id="floatingSocialtel">
    <a href="tel:00442037143880">+44 (0)20 3714 3880</a>
</div>

<div id="floatingSocialemail">
        <a href="mailto:[email protected]">[email protected]</a>
</div>

<div id="floatingSocial">
  <a class="linkedIn" href="http://www.linkedin.com/company/998701" target="_blank">LinkedIn</a>
  <a class="twitter" href="http://twitter.com/Research_Europe" target="_blank">Twitter</a>
  <a class="googlePlus" href="#" target="_blank">Google Plus</a>
</div>

CSS

.slideLeft {
    position:relative;
    right:0 !important;
    background:red;
    transition: right 1s; 
    height:47px;
}

#floatingSocialtel { 
    background:#253b60 url('http://research2.miltonbayer.net/wp-content/themes/Orion/images/tel.png') 0 0 no-repeat;  
    position:fixed; 
    right:-154px;
    top:50px; 
    height:47px; 
    z-index:60; 
    display:block; 
    transition: right 1s; 
}

#floatingSocialtel:hover {
    background:#1d7e6d url('http://research2.miltonbayer.net/wp-content/themes/Orion/images/tel.png') 0 0 no-repeat;  
}


#floatingSocialtel a { 
    display:block; 
    color:#fff; 
    padding:14px 15px 0 0; 
    margin-left:50px; 
    text-decoration:none; 
    font-family: Arial sans-serif;
}


#floatingSocialemail { 
    background:#253b60 url('http://research2.miltonbayer.net/wp-content/themes/Orion/images/email.png') 0 0 no-repeat;  
    position:fixed; 
    right:-189px;
    top:97px; 
    height:47px; 
    z-index:60; 
    display:block; 
    transition: right 1s; 
}

#floatingSocialemail:hover {
    background:#1d7e6d url('http://research2.miltonbayer.net/wp-content/themes/Orion/images/email.png') 0 0 no-repeat;  
}


#floatingSocialemail a { 
    display:block; 
    color:#fff; 
    padding:14px 15px 0 0; 
    margin-left:50px; 
    text-decoration:none; 
    font-family: Arial sans-serif;
}



#floatingSocial { position:fixed; right:0; top:144px; width:47px; z-index:60; display:block; background:#ebebeb; }
#floatingSocial a { display:block; width:47px; height:47px; overflow:hidden; text-indent:-999px; }


#floatingSocial a.linkedIn { background: url('http://research2.miltonbayer.net/wp-content/themes/Orion/images/social.jpg') 0 -86px; }
#floatingSocial a.linkedIn:hover { background-position: 49px -86px; }
#floatingSocial a.twitter { background: url('http://research2.miltonbayer.net/wp-content/themes/Orion/images/social.jpg') 0px 90px; }
#floatingSocial a.twitter:hover { background-position: 49px 90px; }
#floatingSocial...

JavaScript

$(document).ready(function () {
    $("#floatingSocialtel").click(function(){
       $(this).toggleClass('slideLeft'); 
    });
    
    $("#floatingSocialemail").click(function(){
       $(this).toggleClass('slideLeft'); 
    });
});