JSFiddle - React, Tailwind, and code Playground

HTML

<label for="labelCountry">Country</label>
      <select name="country" class="form-control" id="country" onchange="stateMenu(this.value);">
                        <option style="color:#AFBAC7 !important;" value="" selected >Select a Country</option>
                        <option value="US">United States</option>
                        <option value="CA">Canada</option>
                        <option value="In">India</option>
                        <option value="UK">United Kingdom</option>
                        <option value="FR">France</option>
                        <option value="CH">China</option>
                        <option value="JA">Japan</option>
                        <option value="GE">Germany</option>
                        <option value="AU">Australia</option>
                        <option value="RU">Russia</option>
                        <option value="CA">Canada</option>
                        <option value="PA">Pakistan</option>
                        <option value="IT">Italy</option>
                        <option value="SP">Spain</option>
                        <option value="SK">South Korea</option>
                        <option value="PH">Philippines</option>
                        <option value="EN">England</option>
                        <option value="EG">Egypt</option>
                        <option value="SI">Singapore</option>
                        <option value="GR">Greece</option>
                        <option value="BR">Brazil</option>
       </select>

CSS

select:not(:-internal-list-box) {
  color: #AFBAC7;
}

option {
  color: black;
}