JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ezlab.zrc-sazu.si/uploads/FA/css/font-awesome.min.css">
<link rel="stylesheet" href="http://ezlab.zrc-sazu.si/uploads/FA/css/font-awesome.css">
<div id="search-bar">
    <form method="get" action="search.php" autocomplete="off" name="form_search">
        <input type="hidden" name="type" value="videos" />
        <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
            'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; inputeight:bold;
            font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
            #ffffff" />
        
        <input type="submit" class="search" value="&#xf002;" />
        
        <div id="searchBoxSuggestions"></div>
    </form>
</div>

CSS

.search {
    height:32px;
    width:32px;
    border: none;
    cursor: pointer;
    color:white;
    background-color:black;
    position:relative;
}
input[type="submit"] {
    font-family: FontAwesome;
    font-size: 1.3333333333333333em;
}