JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
 
<div class="container filter-container">    

 <div class="row">
  <div class="col-md-12 search-box">   		  
	  <div class="col-md-12">
		<form class="form-inline">
		  <div class="form-group">
			<label class="search-label">Users:</label>
			<div class="drop">
			  <select class="select-users form-control"></select>
			</div>
		  </div>
		</form>    
	  </div>                                                                                        
  </div>  
 </div>  

</div>

CSS

.filter-container {
    padding: 1%;
    border: 1px solid #eee;
    max-height: 285px;
    overflow-y: scroll;
    background-color: #f8f8f8;
}
.multiselect-container {
  position:relative;
}

JavaScript

$(document).ready(function() {
  $('.select-users').multiselect({
		maxHeight: 400,
		buttonWidth: '100%'	
	});
	var accounts = [
        { label: 'UserID 1', value: '1' },
        { label: 'UserID 2', value: '2' },      
        { label: 'UserID 3', value: '3' }, 
        { label: 'UserID 4', value: '4' },         
        { label: 'All', value: '' }  
        ];	
        
	$('.select-users').multiselect('dataprovider', accounts);  
});