JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="root">
    Root
    <div class="header">
      Header
      <div class="holder">
        Holder
      </div>
    </div>
    <div class="content">
      content
      <div class="box"></div>
    </div>
  </div>
  <div class="overlay"></div>
</body>

CSS

.box {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}

.root {
  display: block;
  background-color: grey;
}

.header {
  background-color: red;
  position: fixed;
  top: 0px;
  width: 1600px;
  /*z-index: 1;*/
}

.holder {
  background-color: green;
  height: 60px;
  width: 1600px;
  z-index: 1002;
  position: absolute;
}

.content {
  background-color: blue;
}

.overlay {
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color: rgb(50,50,50);
  opacity:0.8;
  z-index:10;
}