JSFiddle - React, Tailwind, and code Playground

HTML

<button class="zoomIn">Zoom In</button>
<button class="zoomOff">Reset</button>
<button class="zoomOut">Zoom Out</button>

<div class="board">
    
    <div class="draggable"></div>

</div>

CSS

.board
{
    position: absolute;
    border: 1px solid black;
}

.draggable
{
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: black;
    height: 50px;
    width: 50px;
}

JavaScript

$('.board').css(
{
    'position' : 'absolute',
    'top' : '45px',
    'left' : '20px',
    'height' : $(window).height()-65,
    'width' : $(window).width()-40
});

var currZoom = 1;
    
$(".zoomIn").click(function(){
    currZoom+=0.1;
    $('.board').css(
        {
            'position' : 'absolute',
            'top' : '45px',
            'left' : '20px',
            'height' : $(window).height()-65,
            'width' : $(window).width()-40,
            'zoom' : currZoom
        });
});
$(".zoomOff").click(function(){
    currZoom=1;
    $(".board").css(
        {
            'position' : 'absolute',
            'top' : '45px',
            'left' : '20px',
            'height' : $(window).height()-65,
            'width' : $(window).width()-40,
            'zoom' : currZoom
        });
});
$(".zoomOut").click(function(){
    currZoom-=0.1;
    $('.board').css(
        {
            'position' : 'absolute',
            'top' : '45px',
            'left' : '20px',
            'height' : $(window).height()-65,
            'width' : $(window).width()-40,
            'zoom' : currZoom
        });
});

$(".draggable").draggable(
{
    containment: 'parent',
    distance: 10
});