JSFiddle - React, Tailwind, and code Playground

by Josh Davison

HTML

<script src="https://timmywil.com/panzoom/demo/panzoom.js"></script>
<html>
<body>
  <div class="group">
    <div class="group__one">
        <div class="panzoom-parent">
          <div id="panzoom">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 100 100" version="1.1" x="0px" y="0px"><title>04-11-2015 - target</title><desc>Created with Sketch.</desc><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><g sketch:type="MSArtboardGroup" fill="#000000"><path d="M50,90 C72.09139,90 90,72.09139 90,50 C90,27.90861 72.09139,10 50,10 C27.90861,10 10,27.90861 10,50 C10,72.09139 27.90861,90 50,90 Z M50,82 C67.673112,82 82,67.673112 82,50 C82,32.326888 67.673112,18 50,18 C32.326888,18 18,32.326888 18,50 C18,67.673112 32.326888,82 50,82 Z M50,74 C63.254834,74 74,63.254834 74,50 C74,36.745166 63.254834,26 50,26 C36.745166,26 26,36.745166 26,50 C26,63.254834 36.745166,74 50,74 Z M50,66 C58.836556,66 66,58.836556 66,50 C66,41.163444 58.836556,34 50,34 C41.163444,34 34,41.163444 34,50 C34,58.836556 41.163444,66 50,66 Z M50,58 C54.418278,58 58,54.418278 58,50 C58,45.581722 54.418278,42 50,42 C45.581722,42 42,45.581722 42,50 C42,54.418278 45.581722,58 50,58 Z" sketch:type="MSShapeGroup"/></g></g></svg>
          </div>
        </div>
    </div>
    <div class="group__two">
      <div class="group__two-one">
        <div class="group__two-one-one">
          FIRST
        </div>
      </div>
      <div class="group__two-two">
        <div class="group__two-two-one">
          SECOND
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

.group__one, .group__two {
  height: 90vh;
  width: 50vw;
}

.group__one {
  background: red;
  position: sticky;
  top: 0px;
}

.group__one-inner {
  margin-left: 5vw;
}

.group__two {
  background: blue;
  position: relative;
  margin-left: 10vw;
}

JavaScript

var elem = document.querySelector('#panzoom');
var panzoom = Panzoom(elem, {startScale: 1});