JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<div style="background-color: pink;height:100px;">
		section before the sliding panel
	</div>
	
	<div class="cd-main-content" style="height:200px;background-color:yellow">
		
		<a href="#0" class="cd-btn">show Panel</a>
				
		<div class="cd-panel from-right">
			<div class="cd-panel-container">		
				<div class="cd-panel-content ">				
					<a href="#0" class="cd-panel-close">Close</a>				
					<header class="cd-panel-header">
						<h1>Title Goes Here</h1>
					</header>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis. Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitrferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus? Ab porro fuga consequatur quisquam illo quae quas tenetur.</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad, vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia...

CSS

.cd-main-content {
	padding-top: 100px;
  text-align: center;
  position: relative;
}


.cd-panel {
	z-index: 1000;
  position: absolute; /*fixed;*/
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.6s;
  -moz-transition: visibility 0s 0.6s;
  transition: visibility 0s 0.6s;
}
.cd-panel::after {
  /* overlay layer */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background 0.3s 0.3s;
  -moz-transition: background 0.3s 0.3s;
  transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: background 0.3s 0s;
  -moz-transition: background 0.3s 0s;
  transition: background 0.3s 0s;
}

.cd-panel-header h1 {
  font-weight: bold;
  color: #89ba2c;
}

.from-right .cd-panel-header {
  right: 0;
}


.cd-panel-close {
  position: absolute;
  top: 20px;
  right: 20px;
}

.cd-panel-container {
  position: absolute; /*fixed; */
  width: 90%;
  height: 100%;
  top: 0;
  background: #dbe2e9;
  z-index: 1;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.from-right .cd-panel-container {
  right: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.is-visible .cd-panel-container {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform:...

JavaScript

jQuery(document).ready(function($){
	
	//open the lateral panel
	$('.cd-btn').on('click', function(event){
		event.preventDefault();
		$('.cd-panel').addClass('is-visible');
	});
	
	//clode the lateral panel
	$('.cd-panel').on('click', function(event){
		if( $(event.target).is('.cd-panel-close') ) { 
			$('.cd-panel').removeClass('is-visible');
			event.preventDefault();
		}
	});
	
});