JSFiddle - React, Tailwind, and code Playground

by Shashank D

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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


<div id="combo-div1" class="form-group">
   <select id="sel_name" data-show-subtext="false" class="form-control groupSelect" name="name">
     <option></option>
     <option value="1">1</option>
   </select>
</div>

<div id="combo-div2" class="form-group">
   <select id="sel_name" data-show-subtext="false" class="form-control groupSelect" name="name">
        <option></option>
     <option value="2">2</option>
  </select>
</div>

<div id="combo-div3" class="form-group">
   <select id="sel_name" data-show-subtext="false" class="form-control groupSelect" name="name">
        <option></option>
      <option value="3">3</option>
   </select>
</div>

<div id="combo-div4" class="form-group">
   <select id="sel_name" data-show-subtext="false" class="form-control groupSelect" name="name">
        <option></option>
        <option value="4">4</option>
   </select>
</div>

<div id="combo-div5" class="form-group">
   <select id="sel_name" data-show-subtext="false" class="form-control groupSelect" name="name">
        <option></option>
      <option value="5">5</option>
   </select>
</div>

JavaScript

$('.groupSelect').selectpicker({
  container: 'body',
  dropupAuto: false
});