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 {
    padding-top:2em;
    background-color: #272822;
    color: white;
    overflow:auto;
    box-sizing:border-box;
    height:100%;
}
#header {
    background: tomato;
    border-bottom: 2px solid red;
    position: absolute;
    top:0;
    right:17px;/* average 1 em */;
    left:0;
    height:2em;
}
p {
    padding-bottom: 50px;
}