JSFiddle - React, Tailwind, and code Playground

HTML

<div id="MobileProx">Click here
    <div class="RotateXWrap">
        <span class="RotateX"></span>
    </div>
</div>

CSS

#MobileProx {
	    position:relative;
        top:50px;
        height:20px;
		display:block;
		text-align:left;
		padding:2%;
		color:#fff;
		font-size:1.5em;
		background: #0099a8;
		cursor: pointer;
	}
    #MobileProx .RotateXWrap {
        transition: all 0.35s ease-in-out 0s;
	    -moz-transition: all .35s ease-in-out 0s;
	    -ms-transition: all .35s ease-in-out 0s;
	    -o-transition: all .35s ease-in-out 0s;
	    -webkit-transition: all .35s ease-in-out 0s;    
    }
	#MobileProx .RotateXWrap {
		float:right;
		margin-right:1%;
		width:20px;
		height:20px;
	}
	#MobileProx .RotateXWrap.Active {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#MobileProx .RotateX { 
		margin-left:9px;
		background: white; 
		border-radius:10px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		height: 20px; 
		position: absolute; 
		width: 3px; 
	} 
	#MobileProx .RotateX:after { 
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		background: white; 
		content: ""; 
		height: 3px; 
		left: -9px; 
		position: absolute; 
		top: 8.5px; 
		width: 20px; 
	}

JavaScript

$('#MobileProx').click(function () {
    $('#MobileProx .RotateXWrap').toggleClass('Active'); 
    return false;
});