JSFiddle - React, Tailwind, and code Playground

by Dmitry Sviridenko

HTML

<button class="toggle_menu">
  <span class="burger">
    <span class="band-burg band-burg-1"></span>
    <span class="band-burg band-burg-2"></span>
    <span class="band-burg band-burg-3"></span>
  </span>
</button>

SCSS

$w: 40px;
$h: 4px;
$main-color: #333;
.toggle_menu{
	float: right;
	width: 60px;
	height: 60px;
	background-color: $main-color;
	position: fixed;
	right: 40px;
	top: 40px;
	z-index: 200;
	border: none;
	.burger{
		position: absolute;
		top:5px;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 40px;
		height: 30px;
		.band-burg{
			position: relative;
			width: $w;
			height: $h;
			background: #fff;
			border: none;
			border-radius: 4px;
			display: block;
		}
		.band-burg-1{
			top: 0;
			transition: transform 0.2s, top 0.1s;
		}
		.band-burg-2{
			top: $h*2;
			transition: transform 0.2s, top 0.1s;
    		transition-delay: 0.2s, 0s;
		}
		.band-burg-3{
			top: $h*4;
			transition: all 0.2s;
    		transition-delay: 0.1s;
		}
	}
	.burger.active{
		.band-burg-1{
			top: 13px;
			transform: rotate(135deg);
		}
		.band-burg-2{
			top: 10px;
			transform: rotate(-135deg);
		}
		.band-burg-3{
			opacity: 0;
		    top: 0;
		    transform: rotate(360deg);
		}
	}
}

JavaScript

$(".toggle_menu").click(function() {
	$(".burger").toggleClass("active");
});