JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
  </head>
  <body>

    <div class="wrapper">

      <div class="box" style="transform: translate(10px, 100px);">
        <div>This is the containing box #1 <br/>positioned via translate</div>
        <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
      </div>

      <div class="box" style="transform: translate(40px, 300px);">
        <div>This is the containing box #2 <br/>positioned via translate</div>
        <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
      </div>

      <div class="box" style="transform: translate(70px, 500px);">
        <div>This is the containing box #3 <br/>positioned via translate</div>
        <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
      </div>

      <div class="box" style="transform: translate(100px, 700px);">
        <div>This is the containing box #4 <br/>positioned via translate</div>
        <div class="menu">This is the innerbox. It should be on top of the blue box below.</div>
      </div>
    </div>
  </body>
</html>

CSS

.wrapper {
  /* Empty */
}

.box {
  transform-style: flat;
  background: blue;
  position: absolute;
  width: 410px;
  height: 100px;
  padding: 25px;
  color: white;
  z-index: -1;
}

.menu {
  transform-style: flat;
  border-radius: 2px 0 2px 2px;
  border: solid 3px red;
  position: absolute;
  padding: 10px;
  top: 30px;
  right: 5px;
  height: 180px;
  width: 100px;
  z-index: 1;
  color: white;
  font-size: 13px;
  background: green;
}