JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tert-nav">
    <li><img alt="" border="0" src="images/icon-cart.png" width="16" height="16" /></li>
    <li><img alt="" border="0" src="images/icon-tickets.png" width="16" height="16" /></li>
    <li class="searchit">
        <img alt="" border="0" class="searchicon" src="images/icon-search.png" width="16" height="16" />
        <div class="searchbox">
            <img alt="" border="0" class="closesearch" src="images/icon-close.png" width="16" height="16" />
            <input placeholder="search..." type="text" />
            <input type="submit" value="" />
        </div>
    </li>
</ul>

JavaScript

$(document).ready(function() {


    
    
// Search
$('ul.tert-nav li.searchit').click(function() {
    $(this).addClass('search');
    $('.searchbox').fadeIn();
    $('ul.tert-nav li img.searchicon').hide();
});
    
    $(document).bind('click', function(e){
     var par = $(e.target).parent();
    if(!$('.searchbox').is(e.target))
    {
       if( typeof par != 'undefined' && par.attr('class')=='searchbox')
        return;
            $('.searchbox').hide();
         
    };    
   });

    
  

})