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 {
    width: 178px;
    padding: 60px 0 0 12px; 
    border: 1px solid #000000;
}

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

#search form  {
    margin-top: 10px;
}

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

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

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

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