JSFiddle - React, Tailwind, and code Playground

HTML

<div class="search">    
    <p class="suchtext" >Schnellauswahl:</p>
    <div class="suchwrapp">
    <input class="suchfeld" type="text" onblur="hideSearch(this.value)" onkeyup="searchFor(this.value);"/><img src="./img/Search.png" width="20" height="20" alt="Suche" /><br />
    </div>
    <div id="ergebnis"></div>
<!-- Suche ende -->

CSS

.suchtext
{
margin-bottom:6px;
}

.suchwrapp
{
vertical-align:middle;
}

.suchfeld
{
height:20px;
width:500px;
margin-right:5px;
box-shadow: inset 0 0 4px 2px rgba(36,184,194, 0.2);
}

.suchfeld:focus
{
box-shadow: 0 0 0px 0px rgba(0,0,0, 0.2), 0 0 5px 3px rgba(36,184,194, 0.2);
}

.search img
{
vertical-align:middle;
}

.suchfeld:focus + #ergebnis
{
display:block;
}

#ergebnis
{
display:none;
width:495px;
border:1px solid #cecece;
padding:4px;
}