JSFiddle - React, Tailwind, and code Playground

HTML

<span class="sidebar-button list" onclick="toggleClass()">
  <span class="bar-1"></span>
  <span class="bar-2"></span>
  <span class="bar-3"></span>
</span>

CSS

.sidebar-button.list{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 15px;
}
.sidebar-button.list span{
  width: 100%;
  height: 2px;
  background-color: black;
}

.sidebar-button.xmark {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.sidebar-button.xmark .bar-1, 
.sidebar-button.xmark .bar-2, 
.sidebar-button.xmark .bar-3 {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
}

.sidebar-button.xmark .bar-1 {
  transform: rotate(45deg);
}

.sidebar-button.xmark .bar-2 {
  transform: rotate(-45deg);
}

.sidebar-button.xmark .bar-3 {
  display: none;
}

.sidebar-button span{
  transition-duration: .5s;
}

JavaScript

function toggleClass(){
   let target = document.querySelector('.sidebar-button')
   
   if(target.classList.contains('list'))
   {
   target.classList.remove('list')
   target.classList.add('xmark')
   }
   else{
   target.classList.add('list')
   target.classList.remove('xmark')
   }
}