JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel"> <!--the hidden panel -->
       <div class="content">
              <div class="close">
                  <img src="close.png" />
               </div>

       </div> 
</div>

<div id="tab"> 
 </div>

CSS

#tab {
	width:40px;
	height:200px;
	position:fixed;
	left:0px;
	top:150px;
	display:block;
	cursor:pointer;
	background: #000;
    border-color: #68960b;
}

#panel {
  position:fixed;
	left:0px;
	top:50px;
	background-color:#ccc;
	min-height:522px;
	width:0
    border-color: #68960b;
}

#panel .content {
	width:310px;
	margin-left:70px;
	text-align: left;
}

.close{
  width:14px;
  height:17px;
  border: solid 0px #000;
  margin-top:20px;
  float:right;
  background: red;
}

JavaScript

$(".content").hide();
 
   $('#tab').toggle(function(){
      $('#panel').stop().animate({width:"400px", opacity:1}, 500, function() {
    $('.content').fadeIn('fast');
    });  
   },
   function(){ 
   $('.content').fadeOut('slow', function() { 
      $('#panel').stop().animate({width:"0", opacity:0.1}, 500);
    });
   });

   $('.close').click(function(){
         $('.content').fadeOut('slow', function() { 
      $('#panel').stop().animate({width:"0", opacity:0.1}, 500);
    });
   });