JSFiddle - React, Tailwind, and code Playground

HTML

<div id="status-dropdown">

    <ul style="max-height: 400px; overflow-y: auto; overflow-x: hidden;">
        <div class="input-group" style="display: none;"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
            <input class="form-control multiselect-search" type="text" placeholder="Filter">
        </div>
        <li class="customDropdownUL multiselect-item multiselect-all">
            <a href="javascript:void(0);" class="multiselect-all">
                <label class="checkbox">
                    <input type="checkbox" value="multiselect-all"> All Statuses</label>
            </a>
        </li>
        <li>
            <label class="multiselect-group">Available</label>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="In Stock"> In Stock</label>
            </a>
        </li>
        <li>
            <label class="multiselect-group">Not Available</label>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="Void"> Void</label>
            </a>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="Out of Stock"> Out of Stock</label>
            </a>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="In Stores Only"> In Stores Only</label>
            </a>
        </li>
    </ul>
    
    
</div>

CSS

li{
    list-style-type: none;
}  

#status-dropdown li:has(> label.multiselect-group) {
    background: none repeat scroll 0 0 whitesmoke;
    padding-left: 10px; 
  }