JSFiddle - React, Tailwind, and code Playground

HTML

<li class="innerAggregation">
    <span class="en-facet-icon hashtags"></span>
    <input type="checkbox" checked="checked"></input>
    <span class="count"> Hashtags </span>
</li>
<li class="innerAggregation">
    <span class="en-facet-icon useraccounts"></span>
    <input type="checkbox"></input>
    <span class="count"> User Accounts </span>
    
</li>

CSS

li { list-style-type: none; }

.useraccounts, .hashtags {
    position: absolute;
    width: 4px;
    height: 25px;
    margin: 3px 0 0 -1px;
    background-color: #333e42; // grey color
    border-radius: 3px 0 0 3px;
}

.count {
    position: absolute;
    margin-top: 7px;
    color: #333e42; // grey color
}

input {
  width: 26px;
  height: 26px;
}

input[type=checkbox]:checked ~ .count {
    color: #fd2626; // red color
}

input[type=checkbox]:checked ~ .useraccounts, input[type=checkbox]:checked ~ .hashtags {
    background-color: #fd2626; // red color
}