JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Код</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">			
</head>
<body>

<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'), nav = document.querySelector('.nav'), button = document.querySelector('.button');
	    (button.classList.contains('activated')) ? moveThis.style.marginLeft = '-530px' : moveThis.style.marginLeft = '30px';
	};
</script>

</body>
</html>

CSS

/* menu call button */
ul{
	transition: 0.5s;
}
.button {
        position:  relative;
        z-index: 1;
        display:block;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-left: 0px;
        margin-top: -71px;
        transition: 0.45s ease-in-out;
        -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);
        }
 
 
.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: relative;
  width: 90%;
  height: 70px;
  /* background: #999; */
  overflow:  hidden;
  /* z-index: -1; */
  margin: 0px  0px  0px  2px;
}
  .nav ul{
    width: 100%;
    height:  70px;
    list-style: none;
    position: relative;
    margin: 20px  0px  0px  -500px;
    z-index: 1;
  }
    .nav ul li{
      float: left;
    }
 
    .nav ul li:hover{background: rgba(0,0,0,.15);}
    .nav ul li:hover > ul{display: block;}
    .nav ul li{
      float: left;
      transition: .3s ease-in-out;
    }
      .nav ul...