JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</button>

<button type="button" class="btn2">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</button>

CSS

.hamburger-box {
		    position: relative;
		    display: inline-block;
		    width: 40px;
		    height: 24px;
		}
		.hamburger-inner {
		    top: 2px;
		    transition-timing-function: cubic-bezier(.68,-.55,.265,1.55);
		    transition-duration: .275s;
		}
		.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
		    background-color: #000;
	        position: absolute;
		    width: 40px;
		    height: 4px;
		    transition-property: transform;
		    border-radius: 4px;
		}
		.hamburger-inner::after, .hamburger-inner::before {
		    content: "";
		}
		.hamburger-inner::before {
		    top: 10px;
		    transition: opacity .125s ease .275s;
		}
		.hamburger-inner::after {
		    top: 20px;
		    transition: transform .275s cubic-bezier(.68,-.55,.265,1.55);
		}
    
.btn2 .hamburger-inner::after, .btn2 .hamburger-inner::before {
  display: block;
}