JSFiddle - React, Tailwind, and code Playground

HTML

<DIV id="main">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    
</DIV>    


<!-- Sidebar -->

<div id="panel"> <!--the hidden panel -->
    <div class="content">
    <h1>Edit</h1>
    </div>    
</div>
<!--if javascript is disabled use this link-->
<a href="/" onclick="return()">
    <div id="tab"> <!-- this will activate your panel. -->
    </div> 
</a>

CSS

DIV
{
     position: relative;
    height: 100%;
      widht: 100%;
   border: 2px dashed black; 
    
}

p
{
     text-align: right;   
    
}


/* Sidebar */

#tab {
    width:10px;
    height:150px;
    position:absolute;
    right:0px;
    top:33%;
    background-color:#59b4d4;
    display:block;
    cursor:pointer;
}
#panel {
    position:absolute;
    right:0px;
    top:0px;
    background-color:#999999;
    opacity: 0.5;
    height:100%;
    width:0;/*new line*/
}
#panel .content {
    
    width:150px;
    margin-left:70px;
}

JavaScript

$('#tab').toggle(function(){ //adding a toggle function to the #tab
      $('#panel').stop().animate({width:"250px", opacity:1}, 800, function() {//sliding the #panel to 400px
      $('.content').fadeIn('slow'); //slides the content into view.
      });  
   },

function(){ //when the #tab is next clicked
   $('.content').fadeOut('slow', function() { //fade out the content 
      $('#panel').stop().animate({width:"0", opacity:0.1}, 800); //slide the #panel back to a width of 0
      });
   });