JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="checkbox" />
<label class="burger" for="checkbox">
  <button>
    <div class="container top">
      <div class="line top"></div>
    </div>
    <div class="container bottom">
      <div class="line bottom"></div>
    </div>
  </button>
</label>

CSS

/* The important stuff */
.container.top {
  transform: translateY(-3px) scaleX(.88235);
}

.container.bottom {
  transform: translateY(3px) scaleX(.88235);
}

input:checked + label .container .line.bottom {
  transform: rotateZ(45deg);
}

input:checked + label .container .line.top {
  transform: rotateZ(-45deg);
}

input:checked + label .container.bottom {
  transform: none;
}

input:checked + label .container.top {
  transform: none;
}

input:checked + label .line.bottom {
  transform: none;
  transition-delay: 0.1s;
}

input:checked + label .line.top {
  transform: none;
  transition-delay: 0.1s;
}

.container {
  transition: transform 0.2s ease-in-out 0.1s;
}

input:checked + label .container {
  transition-delay: 0s;
}

.line {
  transition: transform 0.2s ease-in-out;
}

/* The boilerplate stuff */
button {
  all: unset;
  cursor: pointer;
  display: block;
}

button * {
  pointer-events: none;
}

.burger {
  height: 31px;
  width: 31px;
  display: block;
  position: relative;
}

.container {
  position: absolute;
  left: 7px;
  top: 15px;
}

.line {
  height: 1px;
  border-radius: 3px;
  background: white;
  width: 17px;
}

input {
  display: none;
}

body {
  background: #666;
}