JSFiddle - React, Tailwind, and code Playground
HTML
<div id="menu">
<ul>
<li>Pess Back Key to go back</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class="cont">
<a href="#menu">Show menu</a>
<h1>heading</h1>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro a iure culpa aliquid voluptate illo quae vel cupiditate aperiam voluptatem blanditiis asperiores ullam quis necessitatibus esse quasi nemo assumenda quam.</span>
<span>Voluptatibus praesentium vero eos. Ex omnis blanditiis nostrum officia officiis vel consequuntur a quod delectus porro recusandae facilis. Non laboriosam eaque doloremque ut architecto aliquid quidem. Corporis iusto sapiente reprehenderit?</span>
<span>Aliquam vero pariatur dolores dicta nemo repudiandae fuga omnis id soluta voluptas corporis ipsum quisquam a saepe autem veritatis voluptatum iure culpa deleniti ut ea vel ad officiis quis totam.</span>
<span>Eos impedit quae commodi doloremque mollitia facilis veritatis iure quos error odit. Eaque officia error veritatis asperiores consequuntur nihil quis deserunt molestias officiis laudantium dolor maiores architecto labore praesentium itaque!</span>
<span>Optio omnis animi commodi aliquam perferendis nisi id modi voluptas temporibus impedit corporis ea quia est dolorum sequi perspiciatis minus obcaecati veritatis quasi quo ratione voluptates voluptatibus assumenda! Adipisci a.</span>
</p>
</div>
CSS
body {
background-color: cornsilk;
}
.cont {
width: 500px;
margin: auto;
}
#menu {
display: none;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
background-color: rgba(0,0,0,.3);
margin: auto;
}
#menu > ul {
width: 200px;
list-style-type: none;
background-color: #fff;
margin: auto;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
#menu > ul li {
padding: 20px 10px;
}
#menu:target {
display: block;
}