JSFiddle - React, Tailwind, and code Playground

HTML

<html>


<head>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>


<header>

 <div class="clearfix mx-3 my-2">
       <label class="float-left d-none">
           <i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="toggle()"></i>
           <i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="toggle()"></i>
        </label>
       </div>
       <div id="my-menu">
           <ul  class="list-unstyled" id="links">
           <li><a href="/units" class="text-white">واحدها</a><p>
                            <p> <a href="/fruits" class="text-white">محصولات</a></p>
                             <p> <a href="/pages/درباره-ما" 
                             class="text-white">درباره ما</a></p>
                              <p> <a href="/all" class="text-white">اخبار</a></p>
                             <p> <a href="/contact" class="text-white">ارتباط با ما</a></p>
            </ul>
       </div>

</header>
</body>
</html>

CSS

#my-menu{
            position: relative;
        }
      
        #links{
            position: absolute;
            padding: 30px 25px;
            border-radius: 7px;
            background-color:  #3CB371;
            text-align: center;
            color: white;
            transition:all .5s ease;
            z-index: 10;
        }

JavaScript

const navIcon = document.querySelector('.float-left')
const menu = document.querySelector('#my-menu')
const signOne = document.getElementById('sign-one');
const signTwo = document.getElementById('sign-two');

function toggle() { 
  signOne.classList.toggle('d-none');
  signTwo.classList.toggle('d-none');
  menu.classList.toggle('d-none')
}

function responsive(e) {
 if(window.innerWidth < 757){
  navIcon.classList.remove('d-none')
  menu.classList.add('d-none')

  // If sign-two not hidden then menu shown on less then 757px screen 
  if(!signTwo.classList.contains('d-none')){
   menu.classList.remove('d-none')
  }
 } else {
  navIcon.classList.add('d-none')
  menu.classList.remove('d-none')
 }

}

window.addEventListener('resize', responsive);
window.addEventListener('load', responsive);