JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div id="slide-bar">
  <p>Slide Bar Content</p>
</div>

CSS

#slide-bar {
  position: fixed;
  top: 0;
  right: -200px;
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  transition: 0.5s;
}

#slide-bar.open {
  right: 0;
}

JavaScript

var slideBar = document.getElementById("slide-bar");

function toggleSlideBar() {
  slideBar.classList.toggle("open");
}

// Example of adding a button to toggle the slide bar
var toggleButton = document.createElement("button");
toggleButton.innerHTML = "Toggle Slide Bar";
toggleButton.addEventListener("click", toggleSlideBar);
document.body.appendChild(toggleButton);