JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="form-group has-error">
 <select name="description_id" class="select2">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <option>Four</option>
 </select>
</div>

CSS

.has-error .select2-selection {
    /*border: 1px solid #a94442;
    border-radius: 4px;*/
    border-color:rgb(185, 74, 72) !important;
}

JavaScript

$('select').select2();