JSFiddle - React, Tailwind, and code Playground

by mrtsherman

HTML

<div id="header">header</div>
<div id="content">
    <div>
        Page Content <br />
        <a id="a1" href="#anchor2" name="anchor1">Anchor 1</a>
test            
        <a id="a2" href="#anchor1" name="anchor2">Anchor 2</a> 
test2        
    </div>
</div>

CSS

body { overflow: hidden; }
#header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: gray; border: 1px solid black; }
#content { 
    overflow: scroll; 
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 100%;
    border: 1px solid blue; 
}
#content > div { height: 2000px; }
#a1 { display: block; margin-top: 100px; }
#a2 { display: block; margin-top: 1000px; }