JSFiddle - React, Tailwind, and code Playground

by tanya_22

HTML

<div>
  <form action="" method="get" class="search">
    <div class="search__list">
      <div class="search__item">
        <select class="search__select">
          <option value="nigma">Товар</option>
          <option value="aport">Услуга</option>
        </select>
        <i class="search__arrow">
        </i>
       </div>
      <input name="s" placeholder="Я ищу..." type="search" required class="search__field">
    </div>
    <button type="submit" class="search__button">Найти</button>
  </form>
</div>

SCSS

select, input, button, select{
  padding: 0;
  margin: 0;
  outline: none;
  border: 0;
  border-radius: 0;
  background-color: #fff;
}
.search{
  width: 600px;
}
.search__list,
.search{
  display: flex;
}
.search__select{
  height: 46px;
  padding: 0 39px 0 23px;
  border-right: 1px solid #d7d7d7;
  -webkit-appearance: none;
  font-size: 16px;
  /* for FF */
  -moz-appearance: none;
  text-indent: 0.01px; 
  text-overflow: '';
  /* for IE */
  -ms-appearance: none;
  appearance: none!important;
 }
.search__item{
  position: relative;
  width: 107px;
 }
.search__arrow{
  &::after,
  &::before{
    content: "";
    position: absolute;
    top: 22px;
    right: 18px;
    width: 1px;
    height: 7px;
    background: #8c8c8c;
  }
  &::after{
    transform: rotate(45deg);
  }
  &::before{
    right: 23px;
    transform: rotate(-45deg);
  }
}
input[type=search]{
   -webkit-appearance: textfield;
}
.search__field{
  height: 46px;
  width: 100%;
  padding: 0 23px;
  font-size: 16px;
}
.search__list{
  width: 983px;
  border: 2px solid #000000;
}
.search__button{
  position: relative;
  width: 157px;
  height: 50px;
  font-size: 16px;
  background: #3a3a3a;
  color: #ffffff;
  &::after,
  &::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
  }
  &::after{
    border-top: 25px solid white; 
    border-left: 26px solid transparent;
  }
  &::before{
    top: 26px;
    border-bottom: 25px solid white; 
	  border-left: 26px solid transparent;
  }
}