JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<a id="navicon" href="javascript:void(0);">
    <i id="navicon-open" class="fa fa-bars"></i>
    <i id="navicon-close" class="fa fa-times"></i>
</a>

CSS

#navicon {
	height:45px;
	width:45px;
	border:#000 3px solid;
	border-radius:50%;
	margin:5px 35px 0 0;
	position:relative;
	float:right;
}

#navicon i {
	color:#000;
	top:8px;
	left:11px;
	font-size:24px;
	position:absolute;
}

#navicon #navicon-open {
	opacity:1;
}

#navicon #navicon-close {
	opacity:0;
}

JavaScript

var toggleMobiMenu = function() {
	$('#navicon').on('click touchstart', function() {
        TweenMax.to($(this),0.5,{rotationY:720,rotationX:-720})
        .to($(this).find('#open'),0.5,{opacity:0})
        .to($(this).find('#closed'),0.5,{opacity:1})
	});
}
toggleMobiMenu()