JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
  position: relative;
  width: 30em;
  height: 5em;
  background-image: linear-gradient(to bottom, yellow, green);
  /* z-index: 2; */                   /*  z-index в родителе отменяет z-index для :before и :after */
}

 div:after {
  position: absolute;
  content: "";
  right: -2em;
  top: 2em;
  width: 5em;
  height: 5em;
  background-image: linear-gradient(to bottom, red, blue);
  z-index: -1;
} 

div:active {
  background-image: linear-gradient(to bottom, white, blue);
  transform: scale(0.9);       /*   создаёт новый контекст наложения, z-index для div:active:after игнорируется */
 /*  width: 29.5em;
  height: 4.5em; */
}

div:active:after {
  background-image: linear-gradient(to bottom, white, blue);
 /*  width: 4.5em;
  height: 4.5em; */
  /* z-index: -2; */
}