JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="nav" class="nav">Lorem ipsum 1
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<a href="javascript:;" onclick="nav();">Close</a>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum last</p>
<a href="javascript:;" onclick="nav();">Close</a>

</div>

<div>
<a href="javascript:;" onclick="nav();">Lorem ipsum</a> 1 dolor sit amet, consectetur adipiscing elit. Sed vestibulum sem orci, iaculis pharetra quam rutrum ac. Nam augue mauris, luctus at sodales in, congue vitae quam. Donec cursus felis mauris. Curabitur facilisis massa feugiat eleifend faucibus. Sed ultricies vehicula tellus sit amet lobortis. In at tempor diam. Curabitur a porta quam, tristique pellentesque nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus ut elit a purus bibendum sagittis id eget lorem. Sed quis dictum ligula. Fusce vulputate, odio nec feugiat lacinia, velit ligula ultricies ipsum, sed gravida ex tellus eu massa. Phasellus suscipit felis quis libero semper, a auctor arcu commodo. Sed bibendum consectetur iaculis. Nam facilisis pellentesque ante...

CSS

body {margin:0;}

.nav {position:fixed;width:100%;height:100%;overflow-x: hidden;overflow-y: auto;box-sizing: border-box;padding:20px;background-color:#ffffff;display:inline;opacity:0;transition:all 0.5s ease;z-index:-10;}

.nav_open {display:block;opacity:1;transition:all 0.5s ease;z-index:20;}

JavaScript

function nav() {
var nav = document.getElementById('nav');
if (nav.className == "nav") {nav.className = "nav nav_open";}
else {nav.className = "nav";}
nav.scrollTop = 0;
}