JSFiddle - React, Tailwind, and code Playground

HTML

<div id="searchbar" onclick="searchbar()">
            <div id="search">
                 <input type="text" placeholder="Search" />
            </div>
    
            <div id="searchicon">
                 <img src="img/search.png" />
            </div>
    
            <div id="searchadv">
                 <img src="img/down-arrow.png" />
            </div>   
</div>

CSS

#searchbar{
background: #666;
height: 25px;
width: 345px;
}
#search{
width: 300px; 
height: 25px;
float: left;
border: 0;
}
#searchicon{
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}
#searchadv{
color: #000;
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}
#search input[type="text"] {
background: #666;
height: 23px;
width: 295px;
border: 0;
}
#search input[type="text"]:focus {
background: #fff;
}

JavaScript

function searchbar()
{
searchbar=document.getElementById("searchbar");
searchbar.style.background="#fff";
}