JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<select id="example" multiple="multiple" style="display: none;">
    <optgroup label="Record set definitions">
        <option value="Account">Account</option>
        <option value="Date">Date</option>
        <option value="GG_ENTITY_001">GG_ENTITY_001</option>
        <option value="GG_ENTITY_COLOURS">GG_ENTITY_COLOURS</option>
        <option value="GG_FRUIT">GG_FRUIT</option>
        <option value="JGL BZ6411 Verify Entity">JGL BZ6411 Verify Entity</option>
        <option value="JGL PE 0002">JGL PE 0002</option>
        <option value="JGL Test Ent 0001">JGL Test Ent 0001</option>
        <option value="JGL Test Primary">JGL Test Primary</option>
        <option value="Language">Language</option>
        <option value="New Dwarf Planets">New Dwarf Planets</option>
        <option value="New Planets">New Planets</option>
        <option value="Portfolio">Portfolio</option>
        <option value="Test Date">Test Date</option>
        <option value="Test Ref Entitites">Test Ref Entitites</option>
        <option value="Test entity">Test entity</option>
        <option value="Translation Service">Translation Service</option>
    </optgroup>
    <optgroup label="Output of data source template">
        <option value="Account2">Account</option>
        <option value="Date2">Date</option>
        <option value="GG_ENTITY_0012">GG_ENTITY_001</option>
        <option value="GG_ENTITY_COLOURS2">GG_ENTITY_COLOURS</option>
        <option value="GG_FRUIT2">GG_FRUIT</option>
        <option value="JGL BZ6411 Verify Entity2">JGL BZ6411 Verify Entity</option>
        <option value="JGL PE 00022">JGL PE 0002</option>
        <option value="JGL Test Ent 00012">JGL Test Ent 0001</option>
        <option value="JGL Test Primary2">JGL Test Primary</option>
  ...

CSS

body {
    margin:30px;
}

JavaScript

$(document).ready(function () {
     $('#example').multiselect({
         buttonWidth: '400px',
         maxHeight: 200,
         enableFiltering: true,
         disableIfEmpty: true,
         numberDisplayed: 5,
         enableClickableOptGroups: true,
         filterPlaceholder: 'Search for something...'
     });
 });