JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkmark">
                <div class="checkmark_circle"></div>
                <div id="checkmark_stem" ></div>
                <div id="checkmark_kick" ></div>
           </div>

CSS

.checkmark {

    display:inline-block;
    width: 60px;
    height:60px;
    border-radius:50%;
       -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);
 
}



.checkmark_circle:hover {
     background:#526F35;
     border-color:#526F35;
     color:transparent;
     -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 600ms, background 1000ms, border-color 1400ms;
}

.checkmark_circle:hover ~#checkmark_stem {
     background-color:white;
     -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 600ms, background 1000ms, border-color 1400ms;  
}

.checkmark_circle:hover ~#checkmark_kick {
     background-color:white;
     -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 600ms, background 1000ms, border-color 1400ms;
}

.checkmark_circle {
    position: absolute;
    width:60px;
    height:60px;
    border-radius:50%;
    left:0;
    top:0;
     border:0.15em solid #939393;
}

#checkmark_stem {
    content:"";
    position: absolute;
    width:8.19px;
    height:24.55px;
    background-color:#939393;
    left:29.7px;
    top:16.2px;
}

#checkmark_kick {
    content:"";
    position: absolute;
    width:8.18px;
    height:8.18px;
    background-color:#939393;
    left:22.6px;
    top:32.4px;
}