JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://devmill.com/cdn/raphael2/raphael_viewbox_fixed.js"></script>
<div id="button">
<a id="zoomin">zoomin</a> | 
<a id="zoomout">zoomout</a> | 
<a id="resetzoom">reset zoom</a>
</div>
<div id="wrapper"><div>

CSS

#button {
    z-index:100;
}
#wrapper {
    width: 0px;
    height: 0px;
    top:0px;
    z-index:1;
}

JavaScript

jQuery(function(){
    var width = 100;
    var height = 100;
    var curWidth = width;
    var curheight = height;
    var Paper = Raphael("wrapper", width, height);
    Paper.rect(0, 0, width, height)
        .attr({ fill: '#900' });
    
    $("#wrapper").draggable();
    
    jQuery('#zoomin').click(function() {  
             curWidth  *= .9;      
             curheight *= .9;      
             Paper.setViewBox(0, 0, 
                              curWidth, 
                              curheight,
                              false);
    });
    
    jQuery('#zoomout').click(function() {  
             curWidth  *= 1.11;      
             curheight *= 1.11;      
             Paper.setViewBox(0, 0, 
                              curWidth, 
                              curheight,
                              false);
    });
    
    jQuery('#resetzoom').click(function() {  
    
             curWidth  = width;
             curheight = height;       
             Paper.setViewBox(0, 0, 
                              width, 
                              height,
                              false);
    });
});