JSFiddle - React, Tailwind, and code Playground

HTML

<div class="obscured">Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… Some content… </div>

CSS

.obscured{
    background-color:#aff;    
    position:relative;
}
.obscured::before{
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    background-color:rgba(0,0,0,0.3);
    content: " Foreground - use an image here ";
    color:#fff;
    text-align:center;
    font:small-caps 3em bold;
}