JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://rawgit.com/DashboardCode/BsMultiSelect/master/dist/js/BsMultiSelect.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="/" method="post">
<div class="container">
<div class="form-group row">
<label class="col-form-label col-sm-2" for="edit-states1-id">BsMultiSelect</label>
<div class="col-sm-10">
<select name="States1" id="edit-states1-id" class="form-control test" multiple="multiple" style="display: none;">
<option value="AL">Alabama</option>
<option value="AK" disabled>Alaska</option>
<option value="AZ" >Arizona</option>
<option value="AR">Arkansas</option>
<option selected value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI" hidden selected>Hawaii Hidden</option>
<option value="ID" hidden>Idaho Hidden</option>
<option value="IL">Illinois</option>
...
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
JavaScript
var $multiSelects = $("select[multiple='multiple']");
function install(){
$multiSelects.bsMultiSelect();
}
install();