JSFiddle - React, Tailwind, and code Playground

HTML

<span class="plusminussign closed">
     <div class="circle">
         <div class="horizontal"></div>
         <div class="vertical"></div>
     </div> <!-- .circle -->
</span> <!-- .plusminussign -->

CSS

.plusminussign{
    position: relative;
    display:inline-block;
    height: 24px;
    width: 24px;
    vertical-align: bottom;
    opacity: .7;
    background: green;
    border-radius: 50%;
    color: #fff;
    margin: 10px auto;
    cursor: pointer;
}

.closed .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

.closed .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
  opacity: 1;
}

.opened {
  opacity: 1;
}

.opened .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

.opened .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
  opacity: 0;
}

.circle .horizontal {
  position: absolute;
    background-color: #fff;
    width: 15px;
    height: 2.5px;
    left: 50%;
    top: 50%;
}

.circle .vertical {
  position: absolute;
    background-color: #fff;
    width: 2.5px;
    height: 15px;
    left: 50%;
    top: 50%;
}

JavaScript

$('.plusminussign').on('click', function(){
    $(this).toggleClass('opened');
});