JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" style="margin-top:100px;">
    <div id="scr"></div>
    <div id="container">1
        <br />2
        <br />3
        <br />4
        <br />5
        <br />6
        <br />7
        <br />8
        <br />9
        <br />10
        <br />11
        <br />12
        <br />13
        <br />14
        <br />15
        <br />16
        <br />17
        <br />18
        <br />19
        <br />20
        <br />21
        <br />22
        <br />23
        <br />24
        <br />25
        <br />26
        <br />27
        <br />28
        <br />29
        <br />30
        <br />31
        <br />32
        <br />33
        <br />34
        <br />35
        <br />36
        <br />37
        <br />38
        <br />39
        <br />40
        <br />41
        <br />42
        <br />43
        <br />44
        <br />45
        <br />46
        <br />47
        <br />48
        <br />49
        <br />50
        <br />51
        <br />52
        <br />53
        <br />54
        <br />55
        <br />56
        <br />57
        <br />58
        <br />59
        <br />60
        <br />61
        <br />62
        <br />63
        <br />64
        <br />65
        <br />66
        <br />67
        <br />68
        <br />69
        <br />70
        <br />71
        <br />72
        <br />73
        <br />74
        <br />75
        <br />76
        <br />77
        <br />78
        <br />79
        <br />80
        <br />81
        <br />82
        <br />83
        <br />84
        <br />85
        <br />86
        <br />87
        <br />88
        <br />89
        <br />90
        <br />91
        <br />92
        <br />93
        <br />94
        <br />95
        <br />96
        <br />97
        <br />98
        <br />99
        <br />100
        <br />101
        <br />102
        <br />103
        <br />104
        <br />105
        <br />105
        <br />105
        <br />105
        <br />105
        <br />105
        <br />105
        <br />105
       ...

CSS

#content {
            height: 500px;
            width: 500px;
            overflow: hidden;
            border: solid 1px red;
        }
        #scr {
            height: 100px;
            width: 100px;
            top: 100px;
            left: 50px;
            position: absolute;
            border: solid 1px black;
            background-color: #26a0eb;
            z-index: 3;
        }

JavaScript

window.onload = function () {
           //help from http://stackoverflow.com/a/13152737/139698
           draggable('scr');
       };

       var dragObj = null;

       function draggable(id) {
           var obj = document.getElementById(id);
           obj.style.position = "absolute";
           obj.onmousedown = function () {
               dragObj = obj;
           }
       }

       document.onmouseup = function (e) {
           dragObj = null;
       };

       document.onmousemove = function (e) {
           var y = e.pageY; //scroller

           if (dragObj == null) return;

           var c = document.getElementById('content');
           //var b = document.getElementById('scrbox');
           if (true) { //todo: fix hard-coded values


               var x = y - c.offsetTop;
               var pct = x / c.clientHeight;
               c.scrollTop = Math.floor(c.scrollHeight * pct);


               dragObj.style.top = (y - 50) + 'px'; //50 is an offset so mouse will stay in middle of scroller during drag. If not it will select content at same time. Don't want to disable select either.
           }
       };