JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <div id="line1" class="line"></div>
    <div id="line2" class="line"></div>
    <div id="line3" class="line"></div>
</div>

CSS

#box{
    width:210px;
    height:210px;
    margin-top:50px;
    margin-left:50px;
    background-color:#444;
    position:fixed;
}
#line1{
    margin-top:6px;    
}
#line2{
    margin-top:6px;
}
#line3{
    margin-top:6px;
}
.line{
    width:25px;
    height:2px;
    margin-left:auto;
    margin-right:auto;
    background-color:white;
	margin-bottom:0px;
    -webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
}

.rotateL{
	transform:rotate(45deg) translateX(10px);
	-webkit-transform:rotate(45deg) translateX(10px);
	transform-origin:30%;
	-webkit-transform-origin:30%;
}

.rotateR{
	transform:rotate(-45deg) translateY(10px);
	-webkit-transform:rotate(-45deg) translateY(10px);
	transform-origin:22%;
	-webkit-transform-origin:22%;
}

JavaScript

$('#box').click(function(){
		$(this).find('#line2').hide()
		$(this).find('div.line:first').addClass('rotateL')
		$(this).find('div.line:last').addClass('rotateR')
		})