JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background">
    <div id="effect">
        Effect goes here
    </div>
</div>
<svg>
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
</svg>

CSS

#background {
    background-image: url(http://lorempixel.com/400/400/);
    height: 400px;
    padding: 1px;
    width: 400px;    
}
#effect {
    color: #fff;
    height: 200px;
    margin: 100px 0 0 100px;
    width: 200px;
    
    background-color: #3d3934;
    filter: url(#multiply);
    -webkit-filter: url(#multiply);
    -moz-filter: url(#multiply);
}