JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tinted-div"></div>

<br/>

<!-- here I want to implement it like the one above -->
<img class="tinted-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg">

CSS

.tinted-div {
  width:200px;
  height:200px;
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(0, 255, 0, 0.45), 
      rgba(0, 255, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}