JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="swiftpv-menu">
    <a href="#"><i></i></a>
</div>

CSS

body { background: #3B3F45; }
 
.swiftpv-menu a {
  display: inline-block;
  width:18px;
  height:18px;
  cursor: pointer;
  text-decoration: none;
}

.swiftpv-menu a i {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 3px;
  color:#252525;
  font:bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent:-55px;
  background: #fff;
  transition:all .2s ease-out;
}

.swiftpv-menu a i::before, .swiftpv-menu a i::after {
  content:'';
  width: 18px;
  height: 3px;
  background: #fff;
  position: absolute;
  left:3px;
  transition:all .2s ease-out;
}

.swiftpv-menu a i::before { top: -7px; }
.swiftpv-menu a i::after { bottom: -7px; }
.swiftpv-menu a.active i { background: rgba(0,0,0,0); }

.swiftpv-menu a.active i::before {
  top:0;
  -webkit-transform: rotateZ(45deg);
     -moz-transform: rotateZ(45deg);
      -ms-transform: rotateZ(45deg);
       -o-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.swiftpv-menu a.active i::after {
  bottom:0;
  -webkit-transform: rotateZ(-45deg);
     -moz-transform: rotateZ(-45deg);
      -ms-transform: rotateZ(-45deg);
       -o-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
}

JavaScript

$('.swiftpv-menu a').click(function() {
   $(this).toggleClass('active');
});