JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ajax-search">
    <ul>
        <li class="ajax-search-result">
            <a href="#">
                <p class="title">Result #1</p>
                <p>Medium length description</p>
            </a>
        </li>
        <li class="ajax-search-result">
            <a href="#">
                <p class="title">Result #1</p>
                <p>Medium length description</p>
            </a>
        </li>
        <li class="ajax-search-result">
            <a href="#">
                <p class="title">Result #1</p>
                <p>Medium length description</p>
            </a>
        </li>
    </ul>
</div>

CSS

#ajax-search { 
    position: absolute; 
    top: 50px; 
    right: 155px; 
    max-width: 350px; 
    border: 1px solid #C7C7C5; 
    box-shadow: 0 3px 10px #C7C7C5; 
}

#ajax-search ul li a {
    display: block; 
    padding: 9px 18px;
}
#ajax-search ul li a:hover { 
    text-decoration: none; 
}
#ajax-search ul li.ajax-search-result a:hover { 
    background-color: red; 
}
#ajax-search ul li.ajax-search-result span.title {
    color: inherit; 
}