JSFiddle - React, Tailwind, and code Playground

by DotNET_Man

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<br/>

<form class="form-group search-box">
  <input placeholder="Search..." class="form-control">
  <button class="btn btn-default">
    <i class="fa fa-search"></i>
  </button>
</form>

CSS

.search-box {
    width: 100%;
    margin: 15px 0;
}

.search-box input {
    border-radius: 10px 0 0 10px;
    display: inline;
    width: 96%;
    height: inherit;
}

.search-box button {
    border-radius: 0 10px 10px 0;
    min-width: 0;
    margin: 0;
    padding: 6px 10px;
}