JSFiddle - React, Tailwind, and code Playground

HTML

<div id="modal">
<div id="page">
    <div id="header">
        Header
    </div>
    How can I stop this from being hidden under header?
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
    <p>content here</p>
</div>
</div>

CSS

body{
    background: grey;
}
#modal{
    background: white;
		bottom: 0;
		height: 60%;
		left: 0;
		margin: auto;
		position: absolute;
		top: 0;
		right: 0;
		width: 75%;
    
}
#page{
    
    position: absolute;
	width: 100%;
	height: 100%;
    background-color: #272822;
    color: white;
    overflow: scroll;
}

#header{
    background: tomato;
    border-bottom: 2px solid red;
    position: fixed;
    width: 100%;
}

p{
    padding-bottom: 50px;
}