JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ck-button"><label><input type="radio" name="sta_choice" id=all value="All" checked><span>All</span></label></div>
      <div id="ck-button"><label><input type="radio" name="sta_choice" id="o1" value="Cold" onclick=handleClick1(this.val);><span class="o1">Cold</span></label></div>                               
      <div id="ck-button"><label><input type="radio" name="sta_choice" id="o2" value="Warm" onclick="handleClick1(this.val);"><span>Warm</span></label></div>                                
      <div id="ck-button"><label><input type="radio" name="sta_choice" id="o3" value="Active" onclick="handleClick1(this.val);"><span>Active</span></label></div>

CSS

#ck-button {
    margin:0px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
  
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
    border-radius:4px;
}

#ck-button label input {
    position:absolute;
    top:-20px;
    
}
input:checked +span{
    background-color:#911;
    color:#fff;
}
 #ck-button label:hover #all + span {
    background-color:#efE0E0;
}
#ck-button label:hover #o1 + span {
    background-color:blue;
}
#ck-button label:hover #o2 + span {
    background-color:orange;
}
#ck-button label:hover #o3 + span {
    background-color:green;
}