JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "menu" onclick="menu();">
				<div id = "lineOne">1</div>
				<div id = "lineTwo">1</div>
				<div id = "lineThree">1</div>
    </div>

CSS

#lineOne, #lineTwo, #lineThree, #line4, #line5, #line6
	{
		margin-top: 6px;
		margin-left: 30px;
		position: relative;
		top: 0px;
		right: 0px;
		width: 50%;
		height: 7px !important;
		background: black;
		color: rgba(1,1,1,0) !important;
	}

JavaScript

function menu()
		{
		//Show Differnet Button
		document.getElementById('lineOne').style.WebkitTransform = "rotate(45deg) translate3d(10px,10px,0)";
		document.getElementById('lineTwo').style.opacity = ".3";
		document.getElementById('lineThree').style.WebkitTransform = "rotate(-45deg) translate3d(10px,-10px,0)";
        }