Tom Select

Basic Select 

            <!-- BEGIN: Basic Select -->
<div>
    <label>Basic</label>
    <div class="mt-2">
        <select data-placeholder="Select your favorite actors" class="tom-select w-full">
            <option value="1">Leonardo DiCaprio</option>
            <option value="2">Johnny Deep</option>
            <option value="3">Robert Downey, Jr</option>
            <option value="4">Samuel L. Jackson</option>
            <option value="5">Morgan Freeman</option>
        </select>
    </div>
</div>
<!-- END: Basic Select -->
<!-- BEGIN: Nested Select -->
<div class="mt-3">
    <label>Nested</label>
    <div class="mt-2">
        <select data-placeholder="Select your favorite actors" class="tom-select w-full">
            <optgroup label="American Actors">
                <option value="1">Leonardo DiCaprio</option>
                <option value="2">Johnny Deep</option>
                <option value="3">Robert Downey, Jr</option>
                <option value="4">Samuel L. Jackson</option>
                <option value="5">Morgan Freeman</option>
            </optgroup>
            <optgroup label="American Actresses">
                <option value="6">Scarlett Johansson</option>
                <option value="7">Jessica Alba</option>
                <option value="8">Jennifer Lawrence</option>
                <option value="9">Emma Stone</option>
                <option value="10">Angelina Jolie</option>
            </optgroup>
        </select>
    </div>
</div>
<!-- END: Nested Select -->

Multiple Select 

            <select data-placeholder="Select your favorite actors" multiple="multiple" class="tom-select w-full">
    <option value="1" selected>Leonardo DiCaprio</option>
    <option value="2">Johnny Deep</option>
    <option value="3" selected>Robert Downey, Jr</option>
    <option value="4">Samuel L. Jackson</option>
    <option value="5">Morgan Freeman</option>
</select>

Header

            <select data-placeholder="Select your favorite actors" data-header="Actors" multiple="multiple" class="tom-select w-full">
    <option value="1">Leonardo DiCaprio</option>
    <option value="2" selected>Johnny Deep</option>
    <option value="3" selected>Robert Downey, Jr</option>
    <option value="4">Samuel L. Jackson</option>
    <option value="5" selected>Morgan Freeman</option>
</select>

Input Group

@ 
            <div class="flex">
    <div class="flex">
        <div class="z-30 -mr-1 flex w-10 items-center justify-center rounded-l border bg-slate-100 text-slate-600 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400">
            @
        </div>
        <select class="tom-select w-full">
            <option value="1">Leonardo DiCaprio</option>
            <option value="2">Johnny Deep</option>
            <option value="3">Robert Downey, Jr</option>
            <option value="4">Samuel L. Jackson</option>
            <option value="5">Morgan Freeman</option>
        </select>
    </div>
</div>

Disabled

            <select disabled="disabled" class="tom-select w-full">
    <option value="1">Leonardo DiCaprio</option>
    <option value="2">Johnny Deep</option>
    <option value="3">Robert Downey, Jr</option>
    <option value="4">Samuel L. Jackson</option>
    <option value="5">Morgan Freeman</option>
</select>

Disabled Option 

            <select class="tom-select w-full">
    <option value="1" disabled>Leonardo DiCaprio</option>
    <option value="2">Johnny Deep</option>
    <option value="3">Robert Downey, Jr</option>
    <option value="4" disabled>Samuel L. Jackson</option>
    <option value="5">Morgan Freeman</option>
</select>