JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="root">
    Root
    <div class="header">
      Header
      <div class="holder highlight">
        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;
}

.highlight {
  box-shadow:0 0 0 9999999px rgba(50,50,50,0.8);
}