JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div style="width: 100%; height:150%; border-style: solid; background-color: red;"></div>

  <div id="wrapper">
    <div id="slyder" class="slyder transpanel">
      <div style="text-align: right;">
        <span onclick="show();">Close</span>
      </div>
    </div>
    <div id="shslyder" class="sliderbutton transpanel" onclick="show();"></div>
  </div>

</body>

CSS

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.slyder {
  border-style: none;
  width: 200px;
  height: 100%;
  /*margin-left: auto;*/
  position: fixed;
  background-color: gray;
  opacity: 0.8;
  right: -200px;
  top: 0px;
}

.sliderbutton {
  width: 20px;
  height: 30px;
  border-style: none;
  background-color: gray;
  opacity: 0.8;
  position: fixed;
  right: 0px;
  top: 48%;
}

.transpanel {
  transition-property: right;
  transition-duration: 1s;
  -moz-transition-property: right;
  -moz-transition-duration: 1s;
}

.showpanel {
  right: 0px;
}

.movesliderbutton {
  right: 200px;
}

JavaScript

function show() {
  alert("");
}