JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div></div>

CSS

div{
    position: relative;
    width: 32px;
    height: 32px;
    float: left;
    background: #F16252;
    cursor: pointer
}
div:before, div:after{
  content: "";
  position: absolute;
  background: #fff;
  -webkit-transition: all 2s;
   transition: all 0.5s;
}
div:before {
  top: 50%;
  margin-top: 0px;
  left: 6px;
  width: 10px;
  height: 2px;
  transform: rotate(45deg);
}
div:after {
    left: 50%;
    margin-left: 0px;
    top: 12px;
    height: 10px;
    width: 2px;
    transform: rotate(-135deg);
}
div:hover:after{
    transform: rotate(-45deg);
}
div:hover:before{
    transform: rotate(-45deg);
}