JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<input type="checkbox" id="nav"/>
<label for="nav">
<span class="nav-btn"></span>
<div class="nav-content">コンテンツだよ！</div>
</label>
</nav>

CSS

nav {
  position: relative;
}
nav label {
  height: auto;
}
.nav-content {
  display: none;
}
.nav-btn {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #000;
  transition: .2s;
}
.nav-btn:before,.nav-btn:after{
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #000;
  transition: .3s;
}
.nav-btn:before{
  margin-top: -6px;
}
.nav-btn:after{
  margin-top: 4px;
}

input:checked .nav-content {
  display: block;
}
input:checked .nav-btn:before, input:checked .nav-btn:after{
  margin-top: 0;
}
input:checked .nav-btn:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
input:checked .nav-btn:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

JavaScript

/* nav  input {
  display:none;
} */