JSFiddle - React, Tailwind, and code Playground
HTML
<div id="search">
<form action="#">
<input type="text" onfocus="if(this.value == 'Zoek naar producten..') { this.value = ''; }" value="Zoek naar producten.." class="inputSearch">
<input type="submit" value="" class="zoekbutton">
</form>
</div>
CSS
#search {
width: 700px;
height: 50px;
}
.inputSearch {
padding: 6px 10px 7px 10px;
width: 390px;
border: 1px solid #cccccc;
background-color:#ececec;
margin-right: 5px;
float: left;
}
.zoekbutton {
width: 28px;
height: 28px;
background: #E4E2D6 url('search.png') no-repeat center;
border: 1px solid #cccccc;
float: left;
margin-top: 2px;
}