JSFiddle - React, Tailwind, and code Playground

HTML

<div class='threebar hamburger'>
  <div class='bar'></div>
  <div class='bar'></div>
  <div class='bar'></div>
</div>

SCSS

.threebar {
  cursor: pointer;
  margin-top: 33px;
  margin-left: 33px;
  .bar {
    width: 70px;
    height: 22px;
    background: #000;
    margin-bottom: 11px;
    transition: all 0.5s ease;
    &:nth-child(1) {
      transform-origin: 50%;
    }
    &:nth-child(2) {
      transform-origin: 50%;
    }
  }
  &.cross {
    .bar:nth-child(1) {
      transform: translateY(75%)  rotate(45deg);
    }
    .bar:nth-child(2) {
      transform: translateY(-75%) rotate(-45deg);
    }
    .bar:nth-child(3) {
      opacity: 0;
    }
  }
  &.arrow {
    .bar:nth-child(1) {
      background: red;
      transform: scaleX(0.5) translateY(50%) rotate(45deg);
    }
    .bar:nth-child(2) {
      background: blue;
      transform: scaleX(0.5) translateY(50%) rotate(-45deg);
    }
    .bar:nth-child(3) {
      opacity: 0;
    }
  }
}

JavaScript

//Hamburger to cross

$(document).on('click', '.hamburger', function() {
  $('.threebar')
    .removeClass('hamburger')
    .addClass('cross');
});

// Cross to Arrow 
$(document).on('click', '.cross', function() {
  $('.threebar')
    .removeClass('cross')
    .addClass('arrow');
});

// Arrow to Hamburger 
$(document).on('click', '.arrow', function() {
  $('.threebar')
    .removeClass('arrow')
    .addClass('hamburger');
});