JSFiddle - React, Tailwind, and code Playground

by onejdc

HTML

<div id="sidepanel" class='border'>
  <div id="grip-tab" class='border'>
    <div id="grip">⋮⋮🏛️</div>
    <div id="city-icon"></div>
  </div>
</div>

CSS

:root {
  --game-border: #b38b4d;
  --panel-bg: rgba(0,0,0,.8);
}
body { background-color: rgba(33,33,33,1); width: 100%; height:100%;}

.border {
  border: 2px solid var(--game-border);
  border-radius: 8px;
}

#sidepanel {
  float:right;
  background-color: var(--panel-bg);
  height: 800px;
  width: 8px;
  position:relative;
}
#grip-tab {
  position: absolute;
  top: 50%;
  left: -30px;
  color:white;
  width: 50px;
  background-color: var(--panel-bg);
  padding: 10px 0 10px 5px;
  border-radius: 8px;
}