JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:500px;height:500px;">

        <div id="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>`
</div>

CSS

#searchbar{
height: 25px;
width: 345px;
}

#searchbar *{
background: #666;
}

#searchbar.focus *{
background: #fff;
}

#search{
width: 300px; 
height: 25px;
float: left;
border: 0;
}
#searchicon{
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}

#searchadv{
width: 10px;
padding: 2px;
margin: 2px;
float: left;
cursor: pointer;
}

#search input[type="text"] {
height: 23px;
width: 295px;
border: 0;
}

JavaScript

$(document).ready(function(){
    $("#search input").click(function(){
        $("#searchbar").addClass("focus");
    });
    
    $("body").click(function(event){
        if (event.target !==  $("#search input")[0]){
            $("#searchbar").removeClass("focus");
        }
    });
});