JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="top-nav">
    This needs to stay on top and<br /> all content below needs to hide underneath it on scroll.
</div>
<div class="copy">
    <p>This is copy</p>
    <p>This is copy</p>
    <p>This is copy</p>
    <p>This is copy</p>
    <p>This is copy</p>
    <p>This is copy</p>
    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>    <p>This is copy</p>
    <p>This is copy</p>
</div>
</div>

CSS

.wrapper {
    width: 500px;
    height: 200px;
    /*border:1px solid purple;*/
}
.top-nav {
    position: fixed;
    top: 0;
    border: 1px solid red;
    background: transparent;
}

.copy {
    position: relative;
    top: 40px;
    border:1px solid green;
    overflow:hidden;
}