JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="text" style="font-size: 600px; left:100px; top:100px">Small text</div>
    <div class="text" style="font-size: 10000px; left:-10000px; top:-10000px">Very big text</div>
  </div>

CSS

html, body {
      overflow: hidden;
      min-height: 100%; }

    #container {
      position: absolute;
      min-height: 100%;   
      min-width: 100%; }

    .text {
      font-family: "Arial";
      position: absolute;
    }

JavaScript

var container = document.getElementById('container'), dragging = false, previousmouse;
   container.x = 0; container.y = 0;

  window.onmousedown = function(e) { dragging = true; previousmouse = {x: e.pageX, y: e.pageY}; }

  window.onmouseup = function() { dragging = false; }

  window.ondragstart = function(e) { e.preventDefault(); }

  window.onmousemove = function(e) {
    if (dragging) {
      container.x += e.pageX - previousmouse.x; container.y += e.pageY - previousmouse.y;
      container.style.transform = 'translate3d(' + container.x + 'px, ' + container.y + 'px, 0)';
      previousmouse = {x: e.pageX, y: e.pageY}; } }