JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
 <nav>
   <ul>
     <li><buttom class="pageGo1">page#1</buttom></li>
     <li><buttom class="pageGo2">page#2</buttom></li>
     <li><buttom class="pageGo3">page#3</buttom></li>
   </ul>
 </nav>
</div>
<div class="page page-1">
  page #1
</div>
<div class="page page-2">
  page #2
</div>
<div class="page page-3">
  page #3
</div>

CSS

.menu {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
}

.menu li {
  display: inline-block;
  padding-right: 120px;
}

.page {
  position: absolute;
  right: -100%;
  width: 100%;
  height: 100%;
  background: blue;
  padding: 100px;
  box-sizing: border-box;
  transition: 200ms;
}

.page-2 {
  background-color: red;
}

.page-3 {
  background-color: green;
}

.page.active {
  right: 0;
}

JavaScript

$(".pageGo1").click(function () {
	$(".page-1").addClass("active");
});
$(".pageGo2").click(function () {
	$(".page-2").addClass("active");
});
$(".pageGo3").click(function () {
	$(".page-3").addClass("active");
});