JSFiddle - React, Tailwind, and code Playground

HTML

<input class="inputfield" type="text" placeholder="SEARCH...">
<ul class="search-results">
    <li class="typeahead" onclick="console.log('test')"> <a class="center" href="alert('hi')">test</a>

    </li>
    <li class="typeahead" onclick="console.log('test')"> <a class="center" href="alert('hi')">test</a>

    </li>
    <li class="typeahead" onclick="console.log('test')"> <a class="center" href="/test">test</a>

    </li>
    <li class="typeahead" onclick="console.log('test')"> <a class="center" href="/test">test</a>

    </li>
</ul>

CSS

input {
    width: 300px;
    height: 26px;
    padding-left: 10px;
    border: 1px solid lightgrey;
    outline: none;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    visibility: hidden;
    transition: visibility 0.2s;
}
input:focus + ul {
    visibility: visible;
}
li {
    border: 1px solid lightgrey;
    border-top-style: none;
    width: 300px;
    height: 25px;
    padding-left: 10px;
    background: #fff;
    cursor: pointer;
}
li:hover {
    background-color: lightgrey;
}
li:hover a {
    color: white;
}
a {
    color: black;
    font-size: 12px;
    display: block;
    text-decoration: none;
}