JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="user_tender_cat" class="treeview-black treeview">
    <li class="expandable"><div class="hitarea expandable-hitarea"></div>
        <span>
            <input name="cat_ids[]" class="cat-ids cat-id-1" value="1" checked="checked" type="checkbox">
            Agricultural/Forestry/Nursery Items
        </span>
        <ul>
            <li>
                <span>
                    <input name="sub_cat_ids[]" class="sub-cat-ids sub-cat-id-2" value="2" type="checkbox">
                    Agricultural Machinery &amp; Equipment
                </span>
            </li>
            <li>
                <span>
                    <input name="sub_cat_ids[]" class="sub-cat-ids sub-cat-id-1" value="1" type="checkbox"/>
                    Agricultural Pruducts
                </span>
            </li>
            ........
        </ul>
    </li>
    <li class="expandable"><div class="hitarea expandable-hitarea"></div>
        <span>
            <input name="cat_ids[]" class="cat-ids cat-id-2" value="2" checked="checked" type="checkbox"/>
            Art/Craft/Entertainment/Fashion/Painting
        </span>
        <ul>
            <li>
                <span>
                    <input name="sub_cat_ids[]" class="sub-cat-ids sub-cat-id-21" value="21" type="checkbox"/>
                    Advertisement &amp; Related
                </span>
            </li>
            <li>
                <span>
                    <input name="sub_cat_ids[]" class="sub-cat-ids sub-cat-id-19" value="19" type="checkbox"/>
                    Band/Musical Instrument
                </span>
            </li>
           
        </ul>
    </li>
</ul>

CSS

.selected{
    background:red;
}