JSFiddle - React, Tailwind, and code Playground

by raminSafari

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 d-md-none">
       <label class="float-left">
           <i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="show()"></i>
           <i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="hide()"></i>
        </label>
       </div>
       <div id="my-menu">
           <ul  class="list-unstyled d-none" 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

function show() { 
    document.getElementById("links").classList.toggle('d-none');
    document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
function hide() {
  document.getElementById("links").classList.toggle('d-none');
   document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}