JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="icon">
    <a href="#"></a>
  </div>
</div>

CSS

#container {
  height: 50px;
  width: 300px;
  background-color: #F5AB35;
}

#icon {
  float: right;
  width: 50px;
  height: 50px;
  background-color: #F9BF3B;
}

#icon:hover {
  cursor: pointer;
}

#icon a {
  position: relative;
} 

#icon a::before, #icon a::after {
  content: "";
  position: absolute;
  background-color: #000;
}

#icon a::before {
  width: 6px;
  height: 35px;
  top: 8px;
  left: 22px;
  transition: .5s ease-in-out;
}

#icon a::after {
  width: 35px;
  height: 6px;
  top: 22px;
  left: 8px;
  transition: .5s ease-in-out;
}

#icon:hover  a::before {
  transform: rotate(-90deg);
   transition: .3s ease-in-out;
}

#icon:hover  a::after {
  transform: rotate(-180deg);
   transition: .3s ease-in-out;
}

JavaScript

var icon = document.getElementById("icon"),
		container = document.getElementById("container");

icon.addEventListener("click", function(){
	container.style.backgroundColor = "#AA0000";
  
})