JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a"></div>
<div class="a top">
  <div class="b"></div>
</div>
<div class="a"></div>

CSS

.a {
  transform: translateY(10px);
  position: "relative";
  background: red;
  height: 50px;
  margin-top: 10px;
  z-index: 1;
  transform-style: flat;
  opacity: 0.8;
}

.b {
  position: "absolute";
  top: 0;
  height: 100px;
  width:25px;
  background: blue;
}
.input.top {
  z-index: 10;
}