JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
   <div class="footer__form">
			<input type="search" name="" class="footer__search" placeholder="Поиск по сайту">
            
    </div>
 </div>

CSS

.wrap{
    width: 400px; 
    height: 100px; 
    background-color: yellow; 
    padding: 20px}
.footer__form { 
    position: relative; 
    width: 215px; 
    *zoom: 1; }
.footer__form:after { 
    content: " "; 
    display: table; 
    clear: both; }

.footer__search { 
    position: relative; 
    float: right; 
    font-size: 14px; 
    color: #212121;
    width: 215px;
    height: 30px; 
    padding-left: 10px; 
    line-height: 30px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #d2e0f3;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.68), inset 1px 2px 2px rgba(0, 23, 53, 0.81);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.68), inset 1px 2px 2px rgba(0, 23, 53, 0.81);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.68), inset 1px 2px 2px rgba(0, 23, 53, 0.81);
    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(255, 255, 255, 0.23)), color-stop(100%, rgba(0, 0, 0, 0.23))); 
    background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0.23) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0.23) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0.23) 100%);
    background-image: linear-gradient(bottom, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0.23) 100%); 
    *zoom: 1; }
.footer__search:after {
     content: " "; 
    display: table; 
    clear: both; }
.footer__search + i { 
    position: absolute; 
    height: 16px; 
    width: 13px; 
    top: 9px; 
    right: 9px; 
    background-image: url(http://files.softicons.com/download/toolbar-icons/16x16-free-toolbar-icons-by-aha-soft/png/16/search.png); 
    z-index: 10; }