JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<form action="" class="zr">
<div class="item">
  <input type="text">
  <div class="overlay"></div>
</div>
<div class="item">
  <input type="text">
  <div class="overlay"></div>
</div>
<div class="item">
  <input type="text">
  <div class="overlay"></div>
</div>
<div class="item">
  <input type="text">
  <div class="overlay"></div>
</div>
<div class="item">
  <input type="text">
  <div class="overlay"></div>
</div>
<div class="item">
  <input type="text">
  <div class="overlay"></div>
</div>
</form>

CSS

.zr > :nth-child(1) {
  z-index: 1100;
}
.zr > :nth-child(2) {
  z-index: 1099;
}
.zr > :nth-child(3) {
  z-index: 1098;
}
.zr > :nth-child(4) {
  z-index: 1097;
}
.zr > :nth-child(4) {
  z-index: 1096;
}

.item {
  position: relative;
  width: 12em;
}

input {
  height: 2em;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 50%;
  background: rgba(0, 0, 0, 0.5);
  height: 2em;
  left: 0;
  right: 0;
  display: none;
  pointer-events: none;
}

input:hover + .overlay {
  display: block;
}