Select

<div class="w-full space-y-3">
    <x-ui.select name="select-country" id="select-country">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
    <x-ui.select no-border no-bg name="select-country" id="select-country"
        class="bg-bg-muted">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
</div>

<div class="w-full space-y-4">
    <x-ui.select label="Country" name="select-country_label" id="select-country_label">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
    <x-ui.select inlined-label label="Country" label-class="min-w-max" name="select-country_inlined" id="select-country_inlined"
        class="bg-bg-muted">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
</div>

<div class="relative w-full">
    <x-ui.select name="select-country" id="select-country" class="pe-9">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
    <span aria-hidden="true"
        class="absolute right-3 inset-y-px text-fg pointer-events-none flex items-center bg-bg">
        <span class="flex iconify ph--caret-up-down"></span>                             
    </span>
</div>