JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
  <img class="pg-image" src="http://i.guim.co.uk/static/w-620/h--/q-95/sys-images/Guardian/Pix/pictures/2015/1/30/1422631112598/2340075f-69ad-443b-9770-2dd03049f474-bestSizeAvailable.jpeg" alt="Something" />
  <div class="overlay"></div>
</div>

CSS

.overlay {
    background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
    bottom:0;
    left: 0;
    position: absolute;
    right:0;
    top:0;
    z-index: 2;
}
.image{position:relative; display: inline-block;}