JSFiddle - React, Tailwind, and code Playground

HTML

<div id="replace-images">
    <img src="http://placehold.it/300x300">
    <img src="http://placehold.it/300x300">
</div>
<div id="do-not-replace-images">
    <img src="http://placehold.it/300x300">
    <img src="http://placehold.it/300x300">
</div>
        <h2>allo</h2>
<p>Vulputate volutpat, anim a, blandit provident, eaque corporis accusantium nam qui in nascetur nostrum quaerat temporibus ut consectetur inceptos ante.</p>

        <p>Ratione vero dignissim eligendi pretium consequat anim. Mollitia velit a animi exercitationem etiam, adipisci! <strong>Modi vestibulum facilis porta Quam nonummy quisquam curabitur turpis lorem odit per, harum, pulvinar taciti tellus, facilisi fugit, torquent tortor, mus dictum ullam vel.</strong> pellentesque praesentium.</p>

<p>Ratione doloribus quaerat incididunt repudiandae pede rutrum architecto aperiam maxime ultricies suscipit, proident natoque, consequuntur quos delectus ducimus quia vitae.</p>

        <p>Nullam egestas porttitor quia <em>leo sequi, ducimus, nostra?</em> Magna felis facilisis praesentium officiis. Arcu, habitant, blanditiis delectus nam. Do etiam.</p>

        <p>Nisi mus tempus integer eleifend <span>mollit tenetur.</span> Elementum felis aut ipsum tortor eleifend, cras debitis occaecat sequi maiores egestas enim.</p>

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 container that contains DOM elements to be overlayed
$.fn.overlayDiv = function() {
    // remove any old overlays (could be there on resize)
    $(this).find('.overlay').remove();
    
    // loop trough the remaining children
    $(this).find('*').each(function() {
        // cache some variables
        var $el =  $(this);
        var $parent = $el.parent();
        
        // 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 overlay)
                // -- this part of the code needs improving...