JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<div class="top-bar"></div>
<div class="bottom-container">
  <div class="open-box"></div>
</div>

CSS

.top-bar {
  display: block;
  height: 44px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0,0,0,0.3);
}

.bottom-container {
  position: fixed;
  top: 0;
  left:0;
  z-index: 9;
  background-color: yellow;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.open-box {
  background-color: red;
  position: fixed;
  top: 0;
  left:0;
  z-index: 12;
  width: 100%;
  height: 100vh;
}