JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

Choose: <input type="text" list="languages">
<label for="languages">
  <datalist id="languages">
    <select>
      <option value="JavaScript">JavaScript</option>
      <option value="Haskell">Haskell</option>
      <option value="Ruby">Ruby</option>
      <option value="Go">Go</option>
      <option value="Python">Python</option>
      <option value="etc">etc</option>
    </select>
  </datalist>
</label>

CSS

input[list="languages"] {
  width: 12em;
  border: none;
  background: #eee;
}
select {
  width: 12em;
  margin: 0;
  margin-left: -12.75em;
}