JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>

<div class="container">
<p>東京市は、（1923年（大正12年）の関東大震災によって人口が増加した）周辺の町村を1932年（昭和7年）に合併し、35区になった[2]。市域は最終的には現在の東京都区部とほぼ同地域となった。</p>
</div>

<div class="headerMessage">
<p>1938年（昭和13年）6月に内務省が「東京都制案要綱」発表し、1943年（昭和18年）1月に政府が「東京都制案」を帝国議会に提出し可決されたことを受け、同年7月1日に東京都制が施行され、東京府と東京市を廃止する形で東京都に統合された[2]。35区は1947年（昭和22年）3月15日に東京22区に再編され、同年5月3日の地方自治法施行により同法の定める特別区となった。</p>
</div>

CSS

* {
    margin:0;
    padding:0;
    word-spacing:-2px;
}


.headerMessage {
    background:#DCEDC8;
    color:#212121;
    position: absolute;
    top: -250px;
    left: 0;
    width: 100%;
    height: 250px;
    padding: 50px;
    transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    overflow: hidden;
    box-sizing: border-box;
    line-height:1.5em;
    font-size:0.9em;
}


#toggle {
    position:absolute;
    appearance:none;
    cursor:pointer;
    left:-100%;
    top:-100%;
}

#toggle + label {
    position:absolute;
    cursor:pointer;
    padding:10px;
    background: #689F38;
    width: 100px;
    border-radius: 3px;
    padding: 8px 10px;
    color: #FFF;
    line-height:20px;
    font-size:12px;
    text-align:center;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin:20px 50px;
    transition:all 500ms ease;
}

#toggle + label:after {
    content:"開く"
}

.container {
    transition: margin 400ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
    padding:5em 3em;
    line-height:1.5em;
    font-size:0.9em;
}

#toggle:checked ~ .headerMessage {
    top: 0;
}

#toggle:checked ~ .container {
    margin-top: 250px;
}

#toggle:checked + label {
    background:#FF5722;
}

#toggle:checked + label:after {
    content:"閉じる"
}