JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gray"></div>

CSS

.gray {
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    width:50%;
    height:100%;
    background-size:200% 100%;
    position:relative;
    
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
}
.gray:after {
    display:block;
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000;
    opacity:.7;
}
body {
    margin:0;
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    height:100%;
    background-size:100% 100%;
}
html {
    height:100%;
}