JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>

    <style>
      .zoom {
        position: relative;
        width: 400px;
        margin: 0 auto;
        height: 500px;
        overflow: hidden;
      }

      img {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
      }

      .container {
        padding-top: 200px;
        width: 50%;
        margin: 0 auto;
        text-align: center;
      }
    </style>


    <script>
      var _scale = 1;
      var defaultWidth;
      var defaultHeight;

      var widget = {

        init: function() {

          setTimeout(function() {
            defaultWidth = $('img').prop('width');
            defaultHeight = $('img').prop('height');

            console.log(defaultWidth);
            console.log(defaultHeight);

          }, 100);

          $('.zoom').on('click', function(e) {

            var scaleDelta = 0.5;
            var currentScale = _scale;
            var nextScale = currentScale + scaleDelta;
            var mousePosOnImageX = (e.pageX - $('.zoom').offset().left);
            var mousePosOnImageY = (e.pageY - $('.zoom').offset().top);

            var offsetX = -(mousePosOnImageX * scaleDelta);
            var offsetY = -(mousePosOnImageY * scaleDelta);

            offsetX = offsetX + parseFloat($('img').css('left').split('px').join(''));
            offsetY = offsetY + parseFloat($('img').css('top').split('px').join(''));

            $('img').css({
              width: defaultWidth * nextScale,
              height: defaultHeight * nextScale,
              left: offsetX,
              top: offsetY
         ...