JSFiddle - React, Tailwind, and code Playground
HTML
<select id="zoomFactor">
<option value=".5">50%</option>
<option value="1" selected>100%</option>
<option value="1.5">150%</option>
</select>
<div id="container">
<div id="zoomTarget" />
</div>
CSS
#container {
background-color:pink;
height:250px;
overflow:auto;
}
#zoomTarget {
margin:auto;
height:500px;
width:500px;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
background: -moz-linear-gradient(top, #ccc, #000);
}
JavaScript
function zoom(factor) {
var scale = 'scale(' + factor + ')',
origin = 'left top';
$('#zoomTarget').css({
'-webkit-transform': scale,
'-webkit-transform-origin': origin,
'-moz-transform': scale,
'-moz-transform-origin': origin
});
}
$('#zoomFactor').change(function() {
zoom($(this).val());
});