JSFiddle - React, Tailwind, and code Playground

HTML

<form class="search-box">
    <input class="search-input" id="search-input" type="search" oninput="search();" onkeyup="search();" autocomplete="off">
    <button class="search-btn">Suchen</button>
    <div class="search-content">
        <div class="search-con1">
            <div class="search-con2">
                <a data-search="link 1" href="">Link 1</a>
                <a data-search="link 2" href="">Link 2</a>
                <a data-search="link 3" href="">Link 3</a>
                <a data-search="link 4" href="">Link 4</a>
                <a data-search="link 5" href="">Link 5</a>
                <a data-search="link 6" href="">Link 6</a>
                <a data-search="link 7" href="">Link 7</a>
                <a data-search="link 8" href="">Link 8</a>
                <a data-search="link 9" href="">Link 9</a>
                <a data-search="link 10" href="">Link 10</a>
                
                <p id="not-found" class="not-found">nichts gefunden</p>
            </div>
        </div>
    </div>
</form>

CSS

/* Searchbox + Searchcontent */
input, 
button{
    outline: none;
}
.search-box{
    font-family: Arial;
    position: relative;
    margin: 7px;
    display: block;
    float: left;
}
.search-input{
    padding: 11px;
    border: none;
    background-color: #fff;
    border: 1px solid #c62828;
}
.search-btn{
    padding: 12px;
    margin-left: -6px;
    background-color: #c62828;
    border: none;
    color: #fff;
    cursor: pointer;
}
.search-content{
    position: absolute;
    top: 100%;
    background-color: #fff;
    width: 100%;
    height: 150px;
    max-height: 0px;
    overflow: hidden;
    z-index: 0;
    transition: max-height .25s ease;
    box-shadow: 0px 1px 5px 0px #333;
    height: auto;
    border-radius: 0px 0px 5px 5px;
}
.search-input:focus ~ .search-content, 
.search-content:hover{
    max-height: 150px;
}
.search-con1{
    /* damit oben ein Border entsteht und der 
    Inhalt nicht am Hintergrund der Seite klebt */
    padding: 5px 0px;
}
.search-con2{
    max-height: 140px;
    /*Nochmal ein Border damit der Hintergrund 
    von Link:hover nicht am Rand klebt */
    padding: 0px 5px;
    overflow: auto;
}
.search-content a{
    display: block;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 100;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    color: #c62828;
}
.search-content a:hover{
    background-color: #c62828;
    color: #fff;
    box-shadow: inset 0px 0px 10px 2px #851414;
}
.not-found{
    color: #b71c1c;
    display: none;
    padding: 10px 20px;
    font-weight: 700;
}

JavaScript

var searchinput = jQuery("#search-input");
    var items = jQuery(".search-content a");
    var notfound = jQuery("not-found");

    function search() {
        var string = searchinput.val().toLowerCase();
        var items_found = jQuery('.search-content a[data-search*="' + string + '"]');
        items.hide();
        if (items_found.length > 0) {
            notfound.hide();
            items_found.show();
        }
        else {
        		notfound.show();
        }
    }