JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <form class="search-form" action="/search">
      <input class="search-form__field" type="search" placeholder="Search" />
      <a class="search-form__button" href="#"></a>
   </form>
</body>
</html>

CSS

input {
     border:none;
 }     
.search-form {
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
   width:417px; height: 27px;
   margin: 5px auto auto 5px;
   border: 1px solid #cccccc;
}
.search-form__field {
   flex: 1;
   -ms-flex: 1;
   -webkit-flex: 1;
   font: 13px/1.4 'PT Sans',serif;
   padding: 0 6px;
   border-right: 1px solid #cccccc;
}
.search-form__button {
   display: block;
   height: 27px;
   width: 27px;
   background-image: linear-gradient(to top right, #dbdbdb, #fff);
}