JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<header class="myHeader">
  <div class="menuHelp">
    <input onclick="menufuncClick()" class = "menuBtn" type="button" value="|||">
  </div>
  <div class="menuSector" id="idMenuSector">
    <div class="menuWalper" id="idMenuWalper"><input id="idIntoMenuBtn" class="hideIMBtn" type="button" value="|||"></div>

  </div>

</header>
<main>
  <div class="content">
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem...

CSS

*{
    margin:0;
    padding:0;
}
.myHeader{
    width:100%;
    max-height:54px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.menuBtn{
    background-color: rgba(0, 0, 0, 0);
    border:none;
    outline:none;
    font-size:36px;
    border-radius:100%;
    padding-bottom:6.2px;
    padding-left:10px;
    padding-right:10px;
    
    -webkit-transform:rotate(90deg);    
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
    
    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    -ms-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}
.menuHelp{
    text-align:right;
    margin-right:10px;
    overflow:hidden;
}
.menuBtn:hover{
    cursor:pointer;
    color:skyblue;
    
    -webkit-transform:rotate(270deg);   
    -moz-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    transform:rotate(270deg);
}
 
.menuSector{
    display:flex;
    justify-content:flex-end;   
}
.menuWalper{
    background-color:#475e75;
    top:0;
    padding:0;
    position:fixed;
    
    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    -ms-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}
.menuWalperEdit{
    padding-bottom:200%;
    padding-left:240px;
}
.menuWalperEdit::before{
    animation: aaa 0.8s;
    content: "";
    position:absolute;
    width: 1000%;
    height: 100%;
    background:rgba(0, 0, 0, 0);
    left: -1000%;
}
@keyframes aaa {
    100%{
        background-color: rgba(0, 0, 0, 0.3);
    }
}
.hideIMBtn
{
    display:none;
}
.intoMenuBtn
{
    background-color: rgba(0, 0, 0, 0);
    border:none;
    outline:none;
    font-size:36px;
    border-radius:100%;
    padding-bottom:6.2px;
    padding-left:10px;
    padding-right:10px;
    margin-right:10px;
    
    -webkit-transform:rotate(90deg);    
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
   ...

JavaScript

var MenuWalp = document.getElementById("idMenuWalper");
var MenuSec = document.getElementById("idMenuSector");
var IntoMenBtn = document.getElementById("idIntoMenuBtn");
function menufuncClick(){
    MenuWalp.classList.add("menuWalperEdit");
    MenuSec.classList.add("menuSectorEdit");
    IntoMenBtn.classList.add("intoMenuBtn");
    IntoMenBtn.classList.remove("hideIMBtn");
}