JSFiddle - React, Tailwind, and code Playground

HTML

<div class="multiply"></div>
<div class="grayscale"></div>
<div class="multiply grayscale"></div>

CSS

div
{
    display: block;
    width: 216px;
    height: 152px;
    background-image: url(http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg);
    background-size: 216px 152px
}
.grayscale
{
   	-webkit-filter: grayscale(1); 
	-moz-filter: grayscale(1);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray; 
	filter: grayscale(1);
}
.multiply
{
	background-color: rgba(190, 50, 50, 0.65);
	background-blend-mode: multiply;
}