JSFiddle - React, Tailwind, and code Playground

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.js"></script>
<svg width="22" height="35" id="menu_button" class="hidden-sm hidden-md hidden-lg">
  <rect
        style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;"
        class="rectangle first"
        width="22"
        height="2"
        x="0"
        y="0"
        />
  <rect
        style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;"
        class="rectangle second"
        width="22"
        height="2"
        x="0"
        y="6"
        />
  <rect
        style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;"
        class="rectangle third"
        width="22"
        height="2"
        x="0"
        y="12"
        />
</svg>

CSS

#menu_button .rectangle {
	left: 0;
  x:0;
	transition: all ease 1s;
}

#menu_button .rectangle.first {
  transform: rotate(0deg);
	top: 0;
	y: 0;
}

#menu_button .rectangle.second {
  transform: rotate(0deg);
	transform-origin: 8px 9px;
	top: 6px;
  y: 6;
}

#menu_button .rectangle.third {
  transform: rotate(0deg);
	transform-origin: 11px 9px;
	top: 12px;
  y: 12;
}

#menu_button.open .rectangle.first {
  top: 23.2px;
	y: 23.2px;
}

#menu_button.open .rectangle.second {
  transform: rotate(405deg);
}


#menu_button.open .rectangle.third {
    transform: rotate(495deg);
    left: 0;
    x: 0;
    top: 8px;
    y: 8;
}

JavaScript

$('#menu_button').click(
				function() {
					$(this).toggleClass('open');
				}
			);