JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">

  <div class="tags-select">
    <label class="tag-select">
        <input type="radio" name="bye-type" value="1" checked>
        <span class="name">官方标配</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="2">
        <span class="name">官方标配 + 蓝牙耳机</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="3" disabled>
        <span class="name">官方标配 + 充电宝</span>
    </label>
  </div>

</div>

<!-- 利用radio唯一性，实现了不用js也能实现的效果。右边是 scss -->

SCSS

.tags-select{
  font-size: 0;
  
  > .tag-select{
      position:relative;
      display:inline-block;
      font-size: 14px;
      margin: 5px;
      color: #fff;
     
     
     .name{
         display: block;
         line-height: 20px;
         padding: 8px 10px;
         border-radius: 5px;
         background-color: #FE7D91;
         cursor:pointer;
     }
     
     .name:hover{
         background-color: #FE3591;
     }
     
     input[type="radio"]{
         position:absolute;
         z-index: -1;
         opacity: 0;
         
         //选中
         &:checked +.name{
             background-color: #FE3591;
         }
         
         //禁用
         &:disabled +.name{
           background: #eee;
           color: #999;
           cursor: not-allowed;
         }
     }
  }
}

.box{
    display:flex;
    width:100%;
    height:100px;
    justify-content:center;
    align-items:center;
}