JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-container">
    <div class="my-image-wrapper">
        <img class="my-image" src="http://placekitten.com/300/200">
        <div class="my-image-shadow"></div>
    </div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

.my-container {
    width: 100%;
    height: 100%;
}

.my-image-wrapper {
    float: left;
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

.my-image {
    max-width: 100%;
    max-height: 100%;
}
    
.my-image-shadow {
    box-shadow: inset 0 0 5px 5px red;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}