JSFiddle - React, Tailwind, and code Playground

HTML

<textarea>all textarea's should be overlayed</textarea>
<div id='test'>test</div>
<div>no overlay</div>
<div id='overlay-by-id'>overlay by id</div>
<div>no overlay</div>
<div class='overlay-me'>to be overlayed</div>
<div class='overlay-me'>to be overlayed</div>
<div class='overlay-me'>to be overlayed</div>
<div class='overlay-me-also'>to be overlayed also</div>
<textarea>this textarea should be overlayed also</textarea>

CSS

.overlay {
    background: rgba(255, 0, 0, .3);
    margin: 0;
    padding: 0;
    border: none;
}
div {
    padding: 50px;
    border: 5px solid green;
    margin: 5px 10px 8px;
}
p {
    padding: 8px;
    margin: 12px;
}

JavaScript

// jquery plugin to create overlays
// apply to any DOM elemnt you want to be overlayed
// !! note that this is a slightly different version that needs you to specify which elements to overlay! 

$.fn.overlayDiv = function (selector) {

    return this.each(function () {
        // cache some variables
        var $el = $(this);
        var $parent = $el.parent();

        console.log($el);

        // remove the old overlay (could be there on resize)
        $parent.find(selector + '+ .overlay').remove();

        // make the parent relative, if not yet absolute or fixed, for easy positioning
        if ($parent.css('position') !== 'fixed' && $parent.css('position') !== 'absolute') {
            $parent.css('position', 'relative');
        }

        // prepare the css
        var css = {};
        css.zIndex = $el.css('z-index');
        css.position = $el.css('position') == 'fixed' ? 'fixed' : 'absolute';
        css.display = 'block';
        // check if inline or block, and calculate settings appropriatly
        if ($el.css('display') == 'inline') {
            // -- inline
            // clone the element and render it on one line
            var $clone = $el.clone();
            $clone.css({
                width: 'auto',
                display: 'block',
                whiteSpace: 'nowrap'
            });
            $clone.insertAfter($el);
            // compare height of element and clone
            if ($el.outerHeight(true) == $clone.outerHeight(true)) {
                // if the $el is on a single line
                css.width = $el.outerWidth(true);
                css.height = $el.outerHeight(true);
                css.top = $el.position().top;
                css.left = $el.position().left;
                // apply the styling to an overlay div and include it in the DOM
                $('<div class="overlay"></div>').css(css).insertAfter($el);
            } else {
                // if the $el is on multiple lines (we need up to 3 divs to...