JSFiddle - React, Tailwind, and code Playground

HTML

<div class="teaserimage">
  <img src="http://placehold.it/300x200">
  <div class="shadow"></div>
</div>

SCSS

.teaserimage {
    position: relative;
    float: left;
    img {
        vertical-align: middle;
    }
    .shadow {
        -webkit-box-shadow: inset 10px 10px 10px 0px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: inset 10px 10px 10px 0px rgba(0, 0, 0, 0.5);
        box-shadow: inset 10px 10px 10px 0px rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
    }
}