JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">
<script src=" https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen-sprite.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/[email protected]"></script>
<em>
    <label for="multiple-label-example">Label</label>
</em>
<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select" style="width:350px;" tabindex="18" id="multiple-label-example">
    <option value=""></option>
    <optgroup label="NFC NORTH">
        <option value="1" selected>American Black Bear</option>
        <option value="4">Asiatic Black Bear</option>
    </optgroup>
    <optgroup label="NFC NORTH">
        <option value="3">Brown Bear</option>
        <option value="2" selected>Giant Panda</option>
        <option value="5">Sloth Bear</option>
    </optgroup>
</select>

JavaScript

$(".chosen-select").chosen();