JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drop">
  <input type="text" name="class" placeholder="Class" onfocus="dropdown(0)" />
  <ul class="content">
    <li onclick="input(0)">Option 1</li>
    <li onclick="input(1)">Option 2</li>
    <li onclick="input(2)">Option 3</li>
    <li onclick="input(3)">Option 4</li>
  </ul>
</div>

CSS

.drop {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
}

.content {
  display: none;
  list-style-type: none;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  max-height: 190px;
  overflow-y: scroll;
}

.content li {
  padding: 12px 16px;
  display: block;
  margin: 0;
}

JavaScript

function input(pos) {
  var dropdown = document.getElementsByClassName("drop");
  var li = dropdown[0].getElementsByTagName("li");
  document.getElementsByTagName("input")[0].value = li[pos].innerHTML;
  undropdown(0);
}

function dropdown(pos) {
  document.getElementsByClassName("content")[pos].style.display = "block"
}

function undropdown(pos) {
  document.getElementsByClassName("content")[pos].style.display = "none";
}