Tailwind CSS Country Dropdown

<div class="field w-full max-w-72">
  <label class="label" for="country-picker-input">Country</label>
  <div class="input-group" id="country-picker-field">
    <input
      class="input"
      id="country-picker-input"
      placeholder="Select a country"
      value="🇵🇹 Portugal"
    /><span class="input-group-addon input-group-addon-end"
      ><button
        class="btn btn-ghost btn-xs btn-icon"
        type="button"
        tabindex="-1"
        aria-label="Open list"
      >
        <svg
          class="text-muted-foreground"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="m6 9 6 6 6-6"></path>
        </svg></button
    ></span>
  </div>
</div>
<div class="combobox" data-sp-toggle="#country-picker-field">
  <div class="combobox-empty">No countries found.</div>
  <div class="combobox-list scrollbar scrollbar-sm">
    <div class="combobox-group">
      <div class="combobox-label">Recent</div>
      <div class="combobox-item" data-sp-label="🇵🇹 Portugal">
        <input type="radio" name="country" checked="" value="pt" /><span
          >🇵🇹</span
        >
        Portugal
      </div>
      <div class="combobox-item" data-sp-label="🇺🇸 United States">
        <input type="radio" name="country" value="us" /><span>🇺🇸</span> United
        States
      </div>
    </div>
    <div class="combobox-group">
      <div class="combobox-label">All countries</div>
      <div class="combobox-item" data-sp-label="🇦🇷 Argentina">
        <input type="radio" name="country" value="ar" /><span>🇦🇷</span>
        Argentina
      </div>
      <div class="combobox-item" data-sp-label="🇦🇺 Australia">
        <input type="radio" name="country" value="au" /><span>🇦🇺</span>
        Australia
      </div>
      <div class="combobox-item" data-sp-label="🇧🇷 Brazil">
        <input type="radio" name="country" value="br" /><span>🇧🇷</span> Brazil
      </div>
      <div class="combobox-item" data-sp-label="🇨🇦 Canada">
        <input type="radio" name="country" value="ca" /><span>🇨🇦</span> Canada
      </div>
      <div class="combobox-item" data-sp-label="🇨🇳 China">
        <input type="radio" name="country" value="cn" /><span>🇨🇳</span> China
      </div>
      <div class="combobox-item" data-sp-label="🇪🇬 Egypt">
        <input type="radio" name="country" value="eg" /><span>🇪🇬</span> Egypt
      </div>
      <div class="combobox-item" data-sp-label="🇫🇷 France">
        <input type="radio" name="country" value="fr" /><span>🇫🇷</span> France
      </div>
      <div class="combobox-item" data-sp-label="🇩🇪 Germany">
        <input type="radio" name="country" value="de" /><span>🇩🇪</span> Germany
      </div>
      <div class="combobox-item" data-sp-label="🇮🇳 India">
        <input type="radio" name="country" value="in" /><span>🇮🇳</span> India
      </div>
      <div class="combobox-item" data-sp-label="🇮🇹 Italy">
        <input type="radio" name="country" value="it" /><span>🇮🇹</span> Italy
      </div>
      <div class="combobox-item" data-sp-label="🇯🇵 Japan">
        <input type="radio" name="country" value="jp" /><span>🇯🇵</span> Japan
      </div>
      <div class="combobox-item" data-sp-label="🇰🇪 Kenya">
        <input type="radio" name="country" value="ke" /><span>🇰🇪</span> Kenya
      </div>
      <div class="combobox-item" data-sp-label="🇲🇽 Mexico">
        <input type="radio" name="country" value="mx" /><span>🇲🇽</span> Mexico
      </div>
      <div class="combobox-item" data-sp-label="🇳🇱 Netherlands">
        <input type="radio" name="country" value="nl" /><span>🇳🇱</span>
        Netherlands
      </div>
      <div class="combobox-item" data-sp-label="🇳🇿 New Zealand">
        <input type="radio" name="country" value="nz" /><span>🇳🇿</span> New
        Zealand
      </div>
      <div class="combobox-item" data-sp-label="🇳🇬 Nigeria">
        <input type="radio" name="country" value="ng" /><span>🇳🇬</span> Nigeria
      </div>
      <div class="combobox-item" data-sp-label="🇰🇷 South Korea">
        <input type="radio" name="country" value="kr" /><span>🇰🇷</span> South
        Korea
      </div>
      <div class="combobox-item" data-sp-label="🇪🇸 Spain">
        <input type="radio" name="country" value="es" /><span>🇪🇸</span> Spain
      </div>
      <div class="combobox-item" data-sp-label="🇸🇪 Sweden">
        <input type="radio" name="country" value="se" /><span>🇸🇪</span> Sweden
      </div>
      <div class="combobox-item" data-sp-label="🇬🇧 United Kingdom">
        <input type="radio" name="country" value="gb" /><span>🇬🇧</span> United
        Kingdom
      </div>
    </div>
  </div>
</div>