JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent-div">
    <p>PARENT DIV</p>
    <div id="child-div">
    <p>CHILD DIV</p>
        <div id="target-div">
            <p>TARGET DIV (click me)</p>
        </div>
    </div>
</div>

CSS

p {
    margin: 20px;
    font-family: Arial;
    font-size:11px;
}

div {
    position:absolute;
    outline:1px solid #000;
    width:200px;
}

#parent-div {
    margin: 50px;
}

#target-div {
    position:relative;
    -webkit-transition: all 1s ease-out;
    min-height:100px;
    background:#fff;
    opacity:0.8;
}

.big {
    position:fixed;
    outline: 2px dashed #f00 !important;
    top:2% !important;
    left:2% !important;
    width:96% !important;
    height:96% !important;
}

JavaScript

var CLASS_BIG = "big";

$(function() {
    $("#target-div").click(function() {
        if(!$(this).hasClass(CLASS_BIG)) {
            $(this).css({
                position:'fixed',
                top:$(this).offset().top,
                left:$(this).offset().left
            });
            $(this).addClass(CLASS_BIG);
        } else {
            $(this).removeClass(CLASS_BIG);
        }
    });
});