JSFiddle - React, Tailwind, and code Playground

HTML

<section id="base-layer" data-reactid=".0.h"><section id="base-layer-main-menu" data-reactid=".0.h.0"></section><section id="base-layer-nav-menu" data-reactid=".0.h.1"></section><section id="base-layer-main-content" data-reactid=".0.h.2"></section><section id="base-layer-info-bar" data-reactid=".0.h.3"></section><section id="base-layer-contact-bar" data-reactid=".0.h.4"></section></section>

CSS

section#base-layer {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  width: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
}
section#base-layer section#base-layer-main-menu {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: red;
}
section#base-layer section#base-layer-nav-menu {
  position: absolute;
  box-sizing: border-box;
  top: 60px;
  left: 0;
  width: 60px;
  height: calc(100% -  60px);
  background-color: blue;
}
section#base-layer section#base-layer-contact-bar {
  position: absolute;
  box-sizing: border-box;
  top: 60px;
  right: -90px;
  width: 150px;
  height: calc(100% -  60px);
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s ease-in;
  background-color: green;
}
section#base-layer section#base-layer-contact-bar:hover {
  transform: translate3d(-90px, 0, 0);
  transition-delay: 1s;
}
section#base-layer section#base-layer-info-bar {
  position: absolute;
  box-sizing: border-box;
  top: 60px;
  left: 60px;
  width: calc(100% -  60px);
  height: 60px;
  background-color: orange;
}
section#base-layer section#base-layer-main-content {
  position: absolute;
  box-sizing: border-box;
  top: 120px;
  left: 60px;
  width: calc(100% -  60px);
  height: calc(100% -  120px);
  background-color: yellow;
}