JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search">
            <p>Поиск</p>
                <form name="search" method="get" action="">
                <input type="search" name="" placeholder="Найти нужное..." class="search-field" /> 
                <input type="submit" value="" class="search-button" />
                </form>
        </div>

CSS

#search {
    position: relative;
    width: 178px;
    margin-left: 762px;
    padding: 60px 0 0 12px; 
    border: 1px solid red;
}

#search p {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 16px;
    color: #557782;
    margin: 0;
}

#search form  {
    margin-top: 10px;
    position: relative;
    width: 142px;
    padding: 0 25px 0 0;
    
}

#search form input.searchField {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76664587.png') no-repeat;
    width: 122px;
    height: 37px;
    border: none;
    font-family: 'Tahoma', sans-serif;
    font-size: 12px;
    color: #8e9ea4;
    padding-left: 10px;
    padding-right: 35px;
    -webkit-appearance: none;
    outline: none;
}

#search form input.searchButton {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76664598.png') top no-repeat;
    width: 25px;
    height: 33px;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 140px;
}

#search form input.searchButton:hover {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76664598.png') no-repeat;
}

#search form input.searchButton:active {
    background: url('http://static.diary.ru/userdir/2/0/0/4/2004853/76664598.png') no-repeat;
}