JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mobileButton"><span></span></div>

CSS

.mobileButton {
  display: inline-block;
  width: 28px;
  height: 20px;
  margin-top: 1.2em;
  cursor: pointer;
}

.mobileButton span:after,
.mobileButton span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
.mobileButton span:after{
  top: 9px;
}
.mobileButton span {
  position: relative;
  display: block;
}

.mobileButton span,
.mobileButton span:after,
.mobileButton span:before {
  width: 100%;
  height: 5px;
  background-color: #fff;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 2px;
}

/* on activation */
.mobileButton.toggle span {
  background-color: transparent;
}
.mobileButton.toggle span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobileButton.toggle span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}

JavaScript

$(".mobileButton").click(function(){
	$(this).toggleClass("toggle");
});