JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<div class="block">
  <form class="form_search">
  <input class="text_search" type="text" placeholder="SEARCH">
  <button class="b_search" type="submit"><span class="fas fa-search b_ser"></span></button>
            </form>
</div>

CSS

.block{
  width:200px;
}
.form_search {
    width: 100%;
    position: relative;
    margin-top: 30px
}
.text_search, .b_search {
    border: none;
    outline: none;
    border-radius: 30px;
}
.text_search {
    width: 100%;
    height: 33px;
    background: #000;
    color: #000;
    padding-left: 10px;
    font-family: 'Roboto-Regular';
    text-overflow: ellipsis;
    letter-spacing: 0.04em;
}
.text_search:focus{
    color: #fff;
    background: #c73b00;
}
.b_search {
    height: 27px;
    width: 27px;
    position: absolute;
    top: 3px;
    right: 4px;
    background: inherit;
    cursor: pointer;
}
.b_ser{
    color: #525252;
    font-size: 16px;
}