Tag Autocomplete

<div class="w-full max-w-sm">
  <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300" for="ac-input">Skills</label>
  <div class="mb-2 flex flex-wrap gap-2">
    <span class="inline-flex items-center gap-1 rounded-full bg-gray-100 py-1 pl-3 pr-1 text-sm font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">
      TypeScript
      <button type="button" aria-label="Remove TypeScript" class="inline-flex h-5 w-5 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="h-3.5 w-3.5" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg>
      </button>
    </span>
  </div>
  <div class="relative">
    <input id="ac-input" type="text" role="combobox" aria-expanded="true" aria-controls="ac-list" placeholder="Search tags…" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus-visible:ring-blue-400" />
    <ul id="ac-list" role="listbox" class="absolute z-10 mt-1 max-h-48 w-full overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-900">
      <li role="option" aria-selected="false" class="cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800">React</li>
      <li role="option" aria-selected="false" class="cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800">Rust</li>
    </ul>
  </div>
</div>