JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin: 100px 0 0 100px">
    <div id="to-be-masked">
        Mask me
    </div>
<div>

CSS

#to-be-masked {
    width: 200px; height: 300px;
}

.mask {
    position: absolute;
    background: #000;
    opacity: .5;
}

JavaScript

// Create the mask overlays
var topMask = $('<div id="mask-top" class="mask">');
var rightMask = $('<div id="mask-right" class="mask">');
var bottomMask = $('<div id="mask-bottom" class="mask">');
var leftMask = $('<div id="mask-left" class="mask">');

// Append the masks to the body element
var body = $('body');
body.append(topMask).append(rightMask).append(bottomMask).append(leftMask);

// Get the dimensions of the element to mask
var elementToMask = $('#to-be-masked');

var offset = elementToMask.offset();
var top = offset.top;
var left = offset.left;
var width = elementToMask.width();
var height = elementToMask.height();

// Position the masks
topMask.css({
    top: 0,
    left: 0,
    right: 0,
    height: top
});

rightMask.css({
    top: offset.top,
    right: 0,
    left: left + width,
    height: height
});

bottomMask.css({
    top: top + height,
    right: 0,
    bottom: 0,
    left: 0
});

leftMask.css({
    top: top,
    left: 0,
    width: left,
    height: height
});