JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<!--<div class="body-border">
    <div class="scrollable-content">
-->        <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>
-->

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

CSS

.page-content{
    margin-top: -20px;
    position: relative;
    background: white;
}

body{
    margin: 0;
    background: url(https://im-01.gifer.com/ONMJ.gif);
    background-size: cover;
    padding: 100px;
}

#left {
    left: 0;
}

#right {
    right: 0;
}
#top {
    top: 0;
}
#bottom {
    bottom: 0;
}
#left, #right {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 15px;
}

#top, #bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 15px;
}