JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdn.jsdelivr.net/npm/tom-select@1.7.8/dist/js/tom-select.complete.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@1.7.8/dist/css/tom-select.bootstrap5.min.css">
<div class="p-4">	<select id="select-tags" multiple placeholder="Best movies and TV shows">
		<optgroup label="TV Shows">
			<option value="Blue Bloods" data-date="2010-2021">Blue Bloods (2010-2021)</option>
			<option value="Magnum P.I." data-date="1980-1988" selected>Magnum P.I. (1980-1988)</option>
		</optgroup>
		<optgroup label="Movies">
			<option value="An Innocent Man" data-date="1989">An Innocent Man (1989)</option>
			<option value="In & Out" data-date="1997">In & Out (1997)</option>
			<option value="Lassiter" data-date="1984">Lassiter (1984)</option>
			<option value="Mr. Baseball" data-date="1992">Mr. Baseball (1992)</option>
			<option value="Quigley Down Under" data-date="1990">Quigley Down Under (1990)</option>
			<option value="Three Men and a Baby" data-date="1987">Three Men and a Baby (1987)</option>
		</optgroup>
	</select>
	</div>

JavaScript

const patientElement = document.querySelector("#select-tags");
if (patientElement) {
	new TomSelect(patientElement,{
        plugins:['remove_button'],
        persist: false,
        create: true,
        maxOptions: 100,
        sortField: {
            field: "text",
            direction: "asc"
        }
	});
}