JSFiddle - React, Tailwind, and code Playground

by silvawebdesigns

HTML

<div id="left-sidebar">
  <h6>
    LEFT SIDEBAR
  </h6>
</div>

<div id="right-sidebar">
  <h6>
    RIGHT SIDEBAR
  </h6>
</div>

CSS

#left-sidebar {
  position: fixed;
  display: block;
  background: #ae77b3;
  top: 50%;
  left: 0;
  padding: 10px 20px;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left top;
  color: #FFF;
  letter-spacing: 2px;
}

#right-sidebar {
  position: fixed;
  display: block;
  background: #ae77b3;
  top: 50%;
  right: 0;
  padding: 10px 20px;
  transform: rotate(-270deg) translateX(50%);
  transform-origin: right top;
  color: #FFF;
  letter-spacing: 2px;
}