JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
  <div class="container">
    <div class="container_inner">
      <div class="block-1"></div>
      <div class="block-2"></div>
    </div>
  </div>
  <div class="overlay"></div>
</div>

CSS

.page {
  position: relative;
  width: 300px;
  height: 300px;
}

.container,
.container_inner,
.overlay,
.block-1,
.block-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.block-1 { background-color: red; }
.block-2 { background-color: green; }
.overlay { background-color: pink; }

.container_inner { z-index: 1; }
.block-1   { z-index: 100; }
.overlay   { z-index: 10; }