JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mobile-wrap">
						    <div class="main-nav__toggle">
						        <span class="line-burger"></span>
						    </div>
						</div>

CSS

.mobile-wrap {
	display: block;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

.line-burger {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 2px;
	background-color: #fff;
	transition: 0.5s width;
}

.line-burger:after,
.line-burger:before {
	content: '';
	position: absolute;
	width: 18px;
	height: 2px;
	background-color: #fff;
	left: 0;
	transition: 0.5s;
}

.line-burger:after {
	top: calc(100% + 4px);
}

.line-burger:before {
	bottom: calc(100% + 4px);
}

.line-active {
	width: 0;
}

.line-active:after {
	top: 7px;
	transform: rotate(-45deg);
	transform-origin: 0 0;
}

.line-active:before {
	bottom: 7px;
	transform: rotate(45deg);
	transform-origin: 0 100%;
}

.main-nav__toggle {
	position: relative;
	cursor: pointer;
	display: block;
	width: 18px;
	height: 18px;
}


body {
  background-color: #000;
  padding: 20px;
}

JavaScript

$('.mobile-wrap').on('click', function() {
      $('.line-burger').toggleClass('line-active');
      $('.main-header__row').toggleClass('main-header__row--active')
    });