JSFiddle - React, Tailwind, and code Playground

HTML

<span class="cross"><span></span><span></span></span>

CSS

.cross {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.cross span {
  position: absolute;
  height: 100%;
  left: 50%;
  border: 1px solid;
}

.cross span:nth-child(1){transform: rotate(45deg)}
.cross span:nth-child(2){transform: rotate(-45deg)}

.cross:hover span {border-color: #09f;}