JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder"> 
    <!--On clicking, this element should visually be swapped by ".src" element --> 
    <div class="dest"><p>dest</p></div> 
    <div class="src"><p>src</p></div> 
</div>

CSS

div { 
    position:relative;
    margin: 0; 
    padding: 0; 
} 
.holder { 
    position: relative; 
    top: 40pt; 
    left: 40pt; 
    border: black solid thin; 
} 
.dest { 
    position:absolute;
    background-color: #0cf; 
    width: 480px; 
    height: 320px; 
} 
.src { 
    background-color: #09c; 
    width: 1024px; 
    height: 768px; 
}

JavaScript

jQuery(function($){ 
    // Common items, to deal with 
    var src = $(".src"); 
    var dest = $(".dest"); 
    // Setup 
    src.hide(); 
    // Interaction 
    dest.click(function(){ 
        src.css("position", "absolute"); 
        src.width(dest.width()); 
        src.height(dest.height()); 
        src.offset(dest.offset()); 
        
        dest.hide(); 
        src.show(); 
    }); 
    
});