JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header clearfix">
   <div class="header__background">

   <a class="header__icon-bar animated" href="">
      <span></span>
      <span></span>
      <span></span>
  </a>
</div>


    <ul class="header__nav">
      <li class="header__nav__item">  <a href="#"> Home    </a> </li>
      <li class="header__nav__item">  <a href="#"> Contact </a>    </li>
      <li class="header__nav__item">  <a href="#"> Apply   </a>    </li>
      <li class="header__nav__item">  <a href="#"> About   </a>    </li>
    </ul>


 </header>

CSS

/*----------
HEADER
-----------*/
.header__nav{  display: block; float: right; margin: 0; padding: 20px; background: #333; margin-top: 50px;}
.header__nav__item{ display: inline-block; margin: 0; }
.header__nav__item a {padding: 30px; padding: 20px; margin: 0; color: white; text-decoration: none;}
.header__nav__item a:hover { background: #ff3333; }






/*----------
icon-bar
-----------*/
.header__icon-bar{ margin: 0; padding: 10px; background-color: #333; float: left; display: none;}
.header__icon-bar span { padding: 3px 1px; margin: 3px ; background-color: white;}
.header__background{display: none; height: 0px; background-color: #333; margin: 0;}

@media(max-width: 960px) {
  /*header-Menu*/
.header{ width: 100%; padding: 0; margin: 0;}
.header__nav{ width: 100%; overflow: hidden; height: 0px; margin: 0; padding: 0;  mar}
.header__nav__item { display: block; padding: 20px; margin: 0;}
.header__nav__item a{ width: 100%;padding-right: 100%;}

.is-open{ display: block; height: 255px; background: #333; display: block; margin: 0;}

/*button of spaun menu(nav)*/
.header__icon-bar{ display: block;margin-top: 10px; margin-left: 10px; float: left;}
.header__background{display: block; background-color:#333; height: 60px; width: 100%}





}

























*/
/*----------
CLEARFIX
-----------*/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */





.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes rotate-right {
  from {   
    opacity: 0;
    -ms-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {   
    opacity: 1;
    -ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
 ...

JavaScript

$(function(){
  var degree = 45;
    var $buttonNav = $('.header__icon-bar');
  $buttonNav.on('click', function(e){
    e.preventDefault();
    $('.header__nav').toggleClass('is-open');
    
    if($('.header__icon-bar').hasClass('rotate-right')){
     $('.header__icon-bar').removeClass('rotate-right');
     $('.header__icon-bar').toggleClass('rotate-left');
    }else{
    $('.header__icon-bar').removeClass('rotate-left');
     $('.header__icon-bar').toggleClass('rotate-right');
    }
    
  });//end of $buttonNav
});//end of the start