JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<canvas id="colors"></canvas>
<div class="body-border">
    <div class="scrollable-content">
        <div class="hero">
            <p>text</p>
            <p>text</p>
        </div>
        <div class="page-content">
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
        </div>
    </div>
</div>

CSS

body{
    margin: 0;
}

canvas#colors{
  position: fixed;
}


.body-border {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 20px 0 20px 0px;
    width: 100%;
}

.scrollable-content{
    box-sizing: border-box;
    overflow-y: scroll;
    height: 100%;
    padding-right: 20px;
    bottom: 0px;
    position: relative;
    width: 100%;
    padding-left: 20px;
}
.page-content{
    margin-top: -20px;
    position: relative;
    background: white;
    box-shadow: 0 20px 0 0 white;
    padding: 20px;
}
.hero{
    padding: 20px;
}

JavaScript

// ignore this
// its just the canvas background 
var anime=function(){var t,n,e={duration:1e3,delay:0,loop:!1,autoplay:!0,direction:"normal",easing:"easeOutElastic",elasticity:400,round:!1,begin:void 0,update:void 0,complete:void 0},r="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),a={array:function(t){return Array.isArray(t)},object:function(t){return-1<Object.prototype.toString.call(t).indexOf("Object")},html:function(t){return t instanceof NodeList||t instanceof HTMLCollection},node:function(t){return t.nodeType},svg:function(t){return t instanceof SVGElement},number:function(t){return!isNaN(parseInt(t))},string:function(t){return"string"==typeof t},func:function(t){return"function"==typeof t},undef:function(t){return void 0===t},null:function(t){return"null"==typeof t},hex:function(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)},rgb:function(t){return/^rgb/.test(t)},rgba:function(t){return/^rgba/.test(t)},hsl:function(t){return/^hsl/.test(t)},color:function(t){return a.hex(t)||a.rgb(t)||a.rgba(t)||a.hsl(t)}},o=(t={},n={Sine:function(t){return 1-Math.cos(t*Math.PI/2)},Circ:function(t){return 1-Math.sqrt(1-t*t)},Elastic:function(t,n){if(0===t||1===t)return t;var e=1-Math.min(n,998)/1e3,r=t/1-1;return-Math.pow(2,10*r)*Math.sin(2*(r-e/(2*Math.PI)*Math.asin(1))*Math.PI/e)},Back:function(t){return t*t*(3*t-2)},Bounce:function(t){for(var n,e=4;t<((n=Math.pow(2,--e))-1)/11;);return 1/Math.pow(4,3-e)-7.5625*Math.pow((3*n-2)/22-t,2)}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(t,e){n[t]=function(t){return Math.pow(t,e+2)}}),Object.keys(n).forEach(function(e){var r=n[e];t["easeIn"+e]=r,t["easeOut"+e]=function(t,n){return 1-r(1-t,n)},t["easeInOut"+e]=function(t,n){return.5>t?r(2*t,n)/2:1-r(-2*t+2,n)/2}}),t.linear=function(t){return t},t),u=function(t){return a.string(t)?t:t+""},i=function(t){return...