JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script src="https://connect.facebook.net/tr_TR/sdk.js#xfbml=1&amp;version=v20.0&amp;appId=636487687057742"></script>

<div id="sidePanel">
        <div id="panelContent">
<div class="fb-page" 
data-href="https://www.facebook.com/datakolay"
data-width="380" 
data-hide-cover="false"
data-show-facepile="false"></div>      
        </div>
        <div id="panelHandle"><p>Facebook</p></div>
        
      </div>

CSS

/* ===== Primary Styles ========================================================
   Author: NTechi | WebsTutorial
   ========================================================================== */
body{
    font-family:Arial;
}

#sidePanel{
    width:245px;
    position:fixed;
    left:-202px;
    top:15%;
    
}
#panelHandle{
    background-image: -webkit-linear-gradient(top,#333,#222);
    background-image: -moz-linear-gradient(center top , #333333, #222222);
    background-image: -o-linear-gradient(center top , #333333, #222222);
    background-image: -ms-linear-gradient(center top , #333333, #222222);
    background-image:linear-gradient(center top , #333333, #222222);

    height:150px;
    width:40px;
    border-radius:0 5px 5px 0;
    float:left;
    cursor:pointer;
}
#panelContent{
    float:left;
    border:1px solid #333333;
    width:200px;
    height:300px;
    background-color:#EEEEEE;
}

#panelHandle p {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    left: -4px;
    margin: 0;
    padding: 0;
    position: relative;
    top: 26px;
}

JavaScript

jQuery(function($) {
    $(document).ready(function() {
        $('#panelHandle').hover(function() {
            $('#sidePanel').stop(true, false).animate({
                'left': '0px'
            }, 900);
        }, function() {
            jQuery.noConflict();
        });

        jQuery('#sidePanel').hover(function() {
            // Do nothing
        }, function() {

            jQuery.noConflict();
            jQuery('#sidePanel').animate({
                left: '-201px'
            }, 800);

        });
    });
});