JSFiddle - React, Tailwind, and code Playground

HTML

<pre class="bg-text">
    1 2 43543 5 34fgdfgdfg sfd
     sdfg sdfg 
    dfg sdf gsfgsdfg dfg df
    g dfgsdfgsdf gsfd gsdfg sdfg sdfg 
    sd fgs dfg sd
</pre>
<div class="bg"><div>

CSS

.bg{
    position:absolute;
    width:100%;
    height:100px;
    background: rgb(0,250,0);
    background: rgba(0,250,0,0.5);
    background: linear-gradient(to top, rgba(0,250,0,0.5), rgba(0,0,250,0.5));
    z-index:1;
    
}
.bg-text{
    position:absolute;
    z-index:0;
}