JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="form-group">
  
    <select id=form-default name="Form1" class="form-control" >
                <option value="0">Form1</option>
                <option value="1">Option2</option>
                <option value="2">Option3</option>
    </select>
    
    <select id=form-green name="Form2" class="form-control" >
                <option value="0">Form2</option>
                <option value="1">Option2</option>
                <option value="2">Option3</option>
    </select>
   
   </div>

CSS

#form-default {

margin-top:50px;
width:300px;
}

#form-green {

border:1px solid #000000;
margin-top:50px;
width:300px;
}


.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}