JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <div class="input-group margin-bottom-sm search-class-width">
        <span class="input-group-addon search-class icon-search"><i class="fa fa-search"></i></span>
        <input class="form-control search-class input-search" type="text" placeholder="Search">
      </div>
    </div>
  </div>
</div>

CSS

body {
  padding: 12px;
}

.search-class {
  border: none;
  background: #ffffff;
}

.icon-search {
  border: 1px solid #f2f2f2;
  border-top-left-radius: .25em;
  border-bottom-left-radius: .25em;
  border-right: none;
  padding-right: 0;
}

.input-search {
  border: 1px solid #f2f2f2;
  border-top-right-radius: .25em;
  border-bottom-right-radius: .25em;
  border-left: none;
}

.input-search:focus {
  border-color: #f2f2f2;
}

.search-class-width {
  max-width: 400px;
}