JSFiddle - React, Tailwind, and code Playground

HTML

<div class="">
   <input id="selectInput1" class="">
      <ul class="drop" tabindex="1" style="">
         <li id="1">1</li>
         <li id="2">2</li>
         <li id="3">3</li>
      </ul>
</div>

CSS

li{
  cursor:pointer;
  border-bottom:1px solid black;
}
li:hover{
  background:#ccc;
}
.drop{
  border:2px solid black;
  display:block;
  list-style-type:none;
  padding:0;
  margin:0;
  background:#fff;
  width:155px;
}

JavaScript

$('.drop').hide();
$('#selectInput1').click(function() {
    $('.drop').show();
    $('.drop').focus();
});
$('li').click(function() {
    $('#selectInput1').val($(this).attr("id"));
    $('.drop').hide();
});
$(".drop").focusout(function(){
	$('.drop').hide();
})