JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<div id="container">
    <div id="content"></div>
    <div id="zoom"></div>
</div>

CSS

#container {
    -webkit-transform: scale(0.5, 0.5);
    -webkit-transform-origin: 50, 50;
    -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
    transform-origin: 0, 0;
    background: #ccc;
    width: 200px;
    height: 200px;
    position:relative;
}
#content {
    background: #ccc;
    position:absolute;
    top:0;
    left:0;
    width: 200px;
    height: 200px;
    border: 1px solid #333;
}
#zoom {
    position:absolute;
    top:0;
    left:0;
    background: green;
    width: 200px;
    height: 200px;
    border: 1px solid #333
}

JavaScript

$('#zoom').resizable({
    containment: "#container",
    resize: function (event, ui) {
        var changeWidth = ui.size.width - ui.originalSize.width; // find change in width
        var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

        var changeHeight = ui.size.height - ui.originalSize.height; // find change in height
        var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

        ui.size.width = newWidth;
        ui.size.height = newHeight;
    }
});