JSFiddle - React, Tailwind, and code Playground

by sibin va

HTML

<div class="bg">
    <div class="over1"></div>
    <div class="over2"></div>
</div>

CSS

.bg{
    width:400px;
    height:350px;
    position:relative;
    background:url("http://captainkimo.com/wp-content/uploads/2012/05/HDR-Canon-Rebel-XT-Processing-Sample-498x332.jpg");
}
.over1{
    width:40%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    background:red;
    mix-blend-mode: multiply;
}
.over2{
    width:40%;
    height:100%;
    position:absolute;
    top:0px;
    right:0px;
    mix-blend-mode: multiply;
    background:green;
}