JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav" class="nav" >
<ul class="moveThis">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
        <ul>
            <li><a href="#">Our team</a></li>
            <li><a href="#">History</a></li>
        </ul>
    </li>
	<li><a href="#">Clients</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="btn" class="button" onclick="my_f(nav)"></div>

<script>
	document.querySelector('.button').addEventListener('click',function(){
		this.classList.toggle("activated");
	});
	 
	function my_f(nav) {
	    var moveThis = document.querySelector('.moveThis'), button = document.querySelector('.button');
	    (button.classList.contains('activated')) ? moveThis.style.marginLeft = '-550px' : moveThis.style.marginLeft = '20px';
	};
</script>

CSS

/* menu call button */
.moveThis{
	margin-left: -550px;
}
.button {
        display:block;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-left: 20px;
        margin-top:20px;
        transition: 0.45s ease-in-out;
        background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa);
        box-shadow:     inset 0 -3px 10px rgba(140, 140, 140,1), 
        inset 0 3px 10px rgba(0,0,0,.4),        
        0 2px 4px rgba(0,0,0,.9);
        position:  relative;
        z-index:  1;
        }
 
 
.button:not(.activated):hover {
background: radial-gradient(farthest-side ellipse at top left, white, #c4c2c2);
}
 
.button:active {
  background: url("images/icon.png") , radial-gradient(farthest-side ellipse at top left, #eb7fff, #c56bd6);
  transform: rotate(360deg);
  box-shadow:
   0 0px 10px rgba(0,0,0,.5) inset,
   0 2px 50px rgba(0,0,0,.5) inset,
   0 2px 10px rgba(255,255,255,.1);
}
 
 
.activated {
  background: url("images/icon.png") , radial-gradient(farthest-side ellipse at top left, #eb7fff, #c56bd6);
  transform: rotate(360deg);
  box-shadow:
   0 0px 10px rgba(0,0,0,.5) inset,
   0 2px 50px rgba(0,0,0,.5) inset,
   0 2px 10px rgba(255,255,255,.1);
}
 
/*--------------------------------------------------------------------------------------------------------------------*/
 
/* main menu "accordion" */
 
menu{
  padding: 0;
  margin: 0;
  font-family: 'Lato', sans-serif;
}
 
 
.nav{
  position: absolute;
  /* display: none; */
  top: 21;
  left: 60;
  width: 90%;
  background: radial-gradient( 100px 200px at left,  red , red , rgba(0,0,0,0) ); 
  /* background: #11223361; */
  height: 160px;
  margin-left: 20px;
  z-index:  0;
  overflow: hidden;
}
  .nav ul{
    list-style: none;
    position: relative;
    float: left;
    /* margin-left: 0px; */
    display: inline-table;
    transition: 0.5s;
  }
    .nav ul li{
      float: left;
    }
 
    .nav ul li:hover{background: rgba(0,0,0,.15);}
    .nav ul...