JSFiddle - React, Tailwind, and code Playground

HTML

<div class="icon-close"><span></span></div>

CSS

body {
  margin: 50px;
}

.icon-close {
  width: 4em;
  height: 4em;
  
  position: relative;
  
  font-size: 8px;
  
  transform: rotate(45deg);
}

.icon-close:before,
.icon-close:after,
.icon-close span:before,
.icon-close span:after {
  content: "";
  
  position: absolute;
  top: 0;     left: 0;
  bottom: 0;  right: 0;
  
  background: #111;
  
  transition: 0.2s ease;
  transition-property: transform, width, height;
}

.icon-close:before,
.icon-close:after {  
  width: 50%;
  height: 0.5em;
  
  margin: auto 0;
}

.icon-close:after {  
  margin-left: auto;
}

.icon-close span:before,
.icon-close span:after {  
  width: 0.5em;
  height: 50%;
  
  margin: 0 auto;
}

.icon-close span:after {  
  margin-top: auto;
}

/* hover */

.icon-close:hover:before {
  transform: translateX(-1em);
}

.icon-close:hover:after {
  transform: translateX(1em);
}

.icon-close:hover span:before {
  transform: translateY(-1em);
}

.icon-close:hover span:after {
  transform: translateY(1em);
}

/* active */

.icon-close:active:before,
.icon-close:active:after {
  width: 25%;
}

.icon-close:active span:before,
.icon-close:active span:after {
  height: 25%;
}