.tape {
  position: relative;
  height: fit-content;
}
.tape:after {
  content: "";
  display: block;
  width: 180px;
  height: 30px;
  position: absolute;
  background-color: blue;
  opacity: 0.3;
  transition: all 0.3s ease-in-out;
}
.tape-1:after {
  background-color: var(--wp--preset--color--brand-1);
  top: 0;
  left: 0;
  width: 180px;
  left: calc(50% - 90px);
  top: -15px;
  transform: rotate(-2deg);
}
.tape-2:after {
  background-color: var(--wp--preset--color--brand-2);
  top: 0;
  width: 100px;
  right: -20px;
  top: -10px;
  transform: rotate(22deg);
}
.tape-3:after {
  background-color: var(--wp--preset--color--brand-3);
  top: 0;
  width: 100px;
  right: 50px;
  top: -10px;
  transform: rotate(7deg);
}
.tape-4:after {
  background-color: var(--wp--preset--color--brand-3);
  top: 0;
  width: 100px;
  left: -30px;
  top: -5px;
  transform: rotate(-22deg);
}
.tape-5:after {
  background-color: var(--wp--preset--color--brand-1);
  top: 0;
  width: 100px;
  left: 30px;
  top: -15px;
  transform: rotate(-5deg);
}
.tape-6:after {
  background-color: var(--wp--preset--color--brand-2);
  top: 0;
  left: 0;
  width: 180px;
  left: calc(50% - 90px);
  top: -15px;
  transform: rotate(-2deg);
}
.tape-7:after {
  background-color: var(--wp--preset--color--brand-2);
  top: 0;
  width: 100px;
  left: 50px;
  top: -15px;
  transform: rotate(-5deg);
}
.tape:hover::after {
  transform: rotate(0deg);
}