JSFiddle - React, Tailwind, and code Playground

HTML

<span class="add-delete-btn">
  <span class="add-btn">+</span>
  <span class="delete-btn">+</span>
</span>

SCSS

$main-color: #9365b8;
$link-color: #7d7974;
$max-color: #75706b;
$border-color: #babdc0;
$background-color: #fff;
$before-background-color: #484848;
$nav-border-color: #bababa;
$main-back-color: #4c4c4c;
$sign-out-a-color: #dedede;
$sign-out-hover-color: #8e8e8e;
$back-color-1: #f37934;
$green-color: #41a85f;
$light-green-color: #61bd6d;
$violet-color: #553982;
$orange-color: #fba026;

span{
  font-family: OpenSans, sans-serif;
}

.add-delete-btn{
        margin-right: 15px;
        display: flex;
  span{
        display: flex;
        width: 22px;
        height: 22px;
        border: 2px solid;
        font-size: 21px;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        -webkit-backface-visibility: hidden;
        &.add-btn{
          color:$main-color;
          border-color: $main-color;
          margin-right: 10px;
          transition: all .2s ease-out;
          &:hover{
            color: $background-color;
            background-color: $main-color;
            transition: all .2s ease-out;
          }
        }
        &.delete-btn{
          color:#df4837;
          border-color: #df4837;
          transform: rotate(45deg);
          transition: all .2s ease-out;
          &:hover{
            color: $background-color;
            background-color: #df4837;
            transition: all .2s ease-out;
          }
        }
      }
     }