JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
    
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>
    
</div><!-- End demo -->

CSS

.ui-autocomplete {
    position: absolute;
    background-color: white;
    list-style: none;
    cursor: default;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    border: 1px solid black;
    font-size: .86em;
    max-height: 250px;
    overflow-y: auto;
}

.ui-menu-item a {
    padding: 1px 3px;
    display: block;
}

.ui-state-hover {
    background-color: #3399ff;
    color: white;
}

JavaScript

$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags,
        minLength:0
    }).bind('focus', function(){
           if(this.value.length === 0)
               $(this).autocomplete("search"); 
    } );
});