JSFiddle - React, Tailwind, and code Playground

by Martin Murciego

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select name="individual_taxCountry" id="individual_taxCountry" class="select2">
  <option></option>  
  <option value="Afghanistan" >Afghanistan</option>
  <option value="Aland Islands" >Aland Islands</option>
  <option value="Albania" >Albania</option>
  <option value="Algeria" >Algeria</option>
  <option value="Zambia" >Zambia</option>
  <option value="Zimbabwe" >Zimbabwe</option>
</select>

CSS

.select2-container--default .select2-selection--single .select2-selection__arrow {
   right: -13px;
}

.select2-container--default .select2-selection--single
{
	background-color: #21262d;
	border-color: #21262d;
	border-top-color: #21262d;
	border-right-color-value: #21262d;
	border-bottom-color: #21262d;
	border-left-color-value: #21262d;
	height: 34px;
    width: 123px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #444;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
}

JavaScript

$(document).ready(function(){
  $("#individual_taxCountry").select2({
    placeholder: "Select a state*"
  });
});