JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.min.js"></script>
<h3>Multiple Select with group</h3>

  <select class="multiple-select" multiple="multiple">
        <optgroup label="Group 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
        <optgroup label="Group 2">
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
            <option value="6">Option 6</option>
        </optgroup>
        <optgroup label="Group 3">
            <option value="7">Option 7</option>
            <option value="8">Option 8</option>
            <option value="9">Option 9</option>
        </optgroup>
    </select>

CSS

.multiple-select {
    width: 300px;
}

.ms-parent li.group {
    font-size: 150%;
    margin-top: 10px;
}

JavaScript

$(function () {
	$('.multiple-select').multipleSelect();
});