JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">YO<div class="inner">Zippazip</div></div>

CSS

.outer {
    position: relative;
}
.outer:before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-color: red;
    z-index: -1;
}

.inner {
    opacity: 1;
    background-color: blue;
}