JSFiddle - React, Tailwind, and code Playground

by redbmk

HTML

<footer>&nbsp;</footer>
<main>&nbsp;</main>

CSS

header, footer {
    position:fixed;
    background:rgba(0,255,0,.5);
    height: 60px;
    left: 0;
    right:0;
    z-index:10;
}

header { top:0 }
footer { bottom:0 }
html { overflow:auto; }

body {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:orange;
    overflow:scroll;
}
main {
    position:absolute;
    height:1000px;
    width:100%;
}

::-webkit-scrollbar-track {
    background:rgba(50,50,50,.5);
    border-radius:15px;
}

::-webkit-scrollbar {
    width:15px;
    -webkit-appearance:none;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,0,0,.5);
    border-radius:15px;
}

::-webkit-corner {
    background:transparent;
}