JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="container">
    <h1>Scrolling Tab:</h1>
    <div class="scrolling">
      <h2>Interdum et malesuada fames ac.</h2>
      <p>Vivamus cursus luctus justo, ac rutrum ante fermentum in. Proin purus ante, fermentum ac ex vel, interdum egestas ex. Cras justo nibh, vulputate finibus mollis eu, congue vel tellus. Praesent.</p>
      <p>Vivamus vehicula, urna ac rutrum gravida, ligula erat maximus elit, vel pharetra lorem libero at lectus. Phasellus feugiat egestas nibh, id placerat sapien lacinia a. Curabitur vestibulum eros at dui efficitur molestie. Suspendisse venenatis enim
        id mauris volutpat consequat. Nunc scelerisque vel ante non pellentesque. Maecenas tincidunt magna vel justo.</p>
      <ul>
        <li>Gravida eu</li>
        <li>Sed arcu diam</li>
        <li>Pulvinar sit amet</li>
        <li>Ibero accumsan</li>
        <li>Sed euismod molestie eros</li>
      </ul>
      <p>Donec congue enim pretium libero ultrices, sed viverra sapien aliquet. Curabitur at fringilla enim, vitae tristique enim. Quisque at mattis dui, sit amet euismod nisi. Nulla facilisi. Phasellus egestas nulla tempus, eleifend ipsum a, fermentum neque.
        Suspendisse lectus odio, mattis non libero ut, tristique ullamcorper ante. Vivamus sit amet interdum.</p>
    </div>
    <div class="scrolling">
      <h2>Interdum et malesuada fames ac.</h2>
      <p>Vivamus cursus luctus justo, ac rutrum ante fermentum in. Proin purus ante, fermentum ac ex vel, interdum egestas ex. Cras justo nibh, vulputate finibus mollis eu, congue vel tellus. Praesent.</p>
      <p>Vivamus vehicula, urna ac rutrum gravida, ligula erat maximus elit, vel pharetra lorem libero at lectus. Phasellus feugiat egestas nibh, id placerat sapien lacinia a. Curabitur vestibulum eros at dui efficitur molestie. Suspendisse venenatis enim
        id mauris volutpat consequat. Nunc scelerisque vel ante non pellentesque. Maecenas tincidunt magna vel justo.</p>
      <p>Donec congue enim pretium libero...

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}

body {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
}

#container {
  line-height: 1.2em;
  width: 900px;
  margin: 12px auto;
}

#container > h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.scrolling {
  position: relative;
  float: left;
  overflow: hidden;
  width: 360px;
  height: 300px;
  margin: 4px;
  padding: 12px 8px 8px 8px;
  background-color: #fff;
  box-shadow: 1px 1px 8px 0 #666;
}

.scrolling h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.scrolling li {
  margin-left: 24px;
  list-style-type: disc;
}

.scrolling p {
  margin-bottom: 6px;
  text-indent: 6px;
}

.scrolling ul {
  margin: 6px 0;
}

.scrolling:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
...

JavaScript

! function(a) {
  "function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof exports ? module.exports = a : a(jQuery)
}(function(a) {
  function b(b) {
    var g = b || window.event,
      h = i.call(arguments, 1),
      j = 0,
      l = 0,
      m = 0,
      n = 0,
      o = 0,
      p = 0;
    if (b = a.event.fix(g), b.type = "mousewheel", "detail" in g && (m = -1 * g.detail), "wheelDelta" in g && (m = g.wheelDelta), "wheelDeltaY" in g && (m = g.wheelDeltaY), "wheelDeltaX" in g && (l = -1 * g.wheelDeltaX), "axis" in g && g.axis === g.HORIZONTAL_AXIS && (l = -1 * m, m = 0), j = 0 === m ? l : m, "deltaY" in g && (m = -1 * g.deltaY, j = m), "deltaX" in g && (l = g.deltaX, 0 === m && (j = -1 * l)), 0 !== m || 0 !== l) {
      if (1 === g.deltaMode) {
        var q = a.data(this, "mousewheel-line-height");
        j *= q, m *= q, l *= q
      } else if (2 === g.deltaMode) {
        var r = a.data(this, "mousewheel-page-height");
        j *= r, m *= r, l *= r
      }
      if (n = Math.max(Math.abs(m), Math.abs(l)), (!f || f > n) && (f = n, d(g, n) && (f /= 40)), d(g, n) && (j /= 40, l /= 40, m /= 40), j = Math[j >= 1 ? "floor" : "ceil"](j / f), l = Math[l >= 1 ? "floor" : "ceil"](l / f), m = Math[m >= 1 ? "floor" : "ceil"](m / f), k.settings.normalizeOffset && this.getBoundingClientRect) {
        var s = this.getBoundingClientRect();
        o = b.clientX - s.left, p = b.clientY - s.top
      }
      return b.deltaX = l, b.deltaY = m, b.deltaFactor = f, b.offsetX = o, b.offsetY = p, b.deltaMode = 0, h.unshift(b, j, l, m), e && clearTimeout(e), e = setTimeout(c, 200), (a.event.dispatch || a.event.handle).apply(this, h)
    }
  }

  function c() {
    f = null
  }

  function d(a, b) {
    return k.settings.adjustOldDeltas && "mousewheel" === a.type && b % 120 === 0
  }
  var e, f, g = ["wheel", "mousewheel", "DOMMouseScroll", "MozMousePixelScroll"],
    h = "onwheel" in document || document.documentMode >= 9 ? ["wheel"] : ["mousewheel",...