JSFiddle - React, Tailwind, and code Playground

HTML

<div>

<span class="foo"><span class="block"></span><span class="text">aaa</span></span>
<span class="foo"><span class="block"></span><span class="text">bbb</span></span>

</div>

CSS

span.foo{
    color:orange;
    position:relative
}
span.foo > span.block{
    background-color: rgba(0,0,0,1);
    position:absolute;
    width:100%;
    height:100%;
}
span.foo > span.text{
    z-index:9000;
    position:relative;
}

span.foo:last-child span.block{
    opacity: 0.1;
}