JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<!-- burger -->
<div class="closebtn"><a href="javascript:void(0)" onclick="openNav()">&#9776;</a></div>

<!-- nav -->
<div id="myNav" class="overlay">

<div class="closebtn"><a href="javascript:void(0)" onclick="closeNav()">&times;</a></div>
<nav>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</nav>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus et ipsum ac pellentesque. Fusce accumsan bibendum fringilla. Pellentesque in diam quis mi interdum scelerisque eget sed ligula. Maecenas vel nunc nisi. Praesent nunc enim, pretium sit amet vehicula eleifend, vehicula a ligula. Nullam pellentesque a nunc sed efficitur. In hac habitasse platea dictumst. Duis sodales nulla at ullamcorper mollis. Ut elementum dui id odio vestibulum sagittis non eu elit. Ut ut tincidunt neque.</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus et ipsum ac pellentesque. Fusce accumsan bibendum fringilla. Pellentesque in diam quis mi interdum scelerisque eget sed ligula. Maecenas vel nunc nisi. Praesent nunc enim, pretium sit amet vehicula eleifend, vehicula a ligula. Nullam pellentesque a nunc sed efficitur. In hac habitasse platea dictumst. Duis sodales nulla at ullamcorper mollis. Ut elementum dui id odio vestibulum sagittis non eu elit. Ut ut tincidunt neque.</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus et ipsum ac pellentesque. Fusce accumsan bibendum fringilla. Pellentesque in diam quis mi interdum scelerisque eget sed ligula. Maecenas vel nunc nisi. Praesent nunc enim, pretium sit amet vehicula eleifend, vehicula a ligula. Nullam pellentesque a nunc sed efficitur. In hac habitasse platea dictumst. Duis sodales nulla at...

CSS

body {font-family: Arial;margin:0;}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(255,255,255);
  background-color: rgba(255,255,255, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
.overlay nav a {  color: #818181;
  display: block;}

.closebtn {  background-color:white;
text-align:right;
}

.closebtn a {
  padding: 0 10px;
  text-decoration: none;
  font-size: 50px;
    line-height: 50px;
    height:50px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.closebtn a:hover, .closebtn a:focus {
  color: #f1f1f1;
}



@media screen and (max-height: 740px) {

}

JavaScript

function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}