JSFiddle - React, Tailwind, and code Playground

by mrnobody

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;
  color: #525252;
}

.text_search:focus + .b_search {
  color: #fff;
}

.b_ser {
  color: currentColor;
  font-size: 16px;
}