JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <span id="open">Click to open</span>
  <div id="slide">
    <div id="close">X</div>
    <span class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem incidunt asperiores quo architecto consectetur pariatur illum amet recusandae quod repudiandae eum neque, illo minus culpa aut voluptatibus dicta. Aspernatur, soluta?
   </span>
    Aliquid, sit alias. Veniam ullam deleniti aut ipsum ipsa repudiandae architecto tempora suscipit voluptates? Earum quaerat nam dignissimos cumque perspiciatis assumenda? Exercitationem aspernatur officiis vel earum consequatur illo ullam minima!
    
  </div>
</div>

CSS

.main {
  max-width:600px;
  overflow:hidden;
}
#slide {
  position:absolute;
  top:0;
  right:0;
  width:400px;
  height:100vh;
  transform: translateX(100%);
  border: 1px solid;
}
#slide.active {
  transform: translateX(0);
}

JavaScript

const open = document.getElementById("open")
const slide = document.getElementById("slide")
const close = document.getElementById("close")

open.onclick = function() {
    slide.classList.toggle("active")
}

document.onclick = function(e) {
    if(e.target.id !== "slide" && e.target.id !== "open") {
        slide.classList.remove("active")
    }
}