JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainSearch">
				<form class="form-wrapper clearfix">
                    <input type="search" id="search" placeholder="Всегда готов для поиска..." >
					<input type="submit" value="Искать" id="submit">
                </form>
			</div>

CSS

.mainSearch{position:absolute;right:15%;top:4px;}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table; /* 1 */ /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.form-wrapper{
    width:280px;
}
.form-wrapper #search {
	width: 200px;
	height: 0px;
	padding: 10px 5px;
	font: bold 13px 'lucida sans', 'trebuchet MS', 'Tahoma';
	border: 1px solid #ccc;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
    float:left;
}

.form-wrapper #search:focus {
	outline: 0; 
	border-color: #aaa;
	-moz-box-shadow: 0 1px 1px #bbb inset;
	-webkit-box-shadow: 0 1px 1px #bbb inset;
	box-shadow: 0 1px 1px #bbb inset;  
}

.form-wrapper #search::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
}

.form-wrapper #search:-moz-placeholder {
	color: #999;
	font-weight: normal;
}

.form-wrapper #search:-ms-input-placeholder {
	color: #999;
	font-weight: normal;
} 

.form-wrapper #submit {
	float: right;
	border: 1px solid #00748f;
	height: 20px;
	width: 70px;
	padding: 0;
	cursor: pointer;
	font: bold 15px Arial, Helvetica;
	color: #fafafa;
	/* text-transform: uppercase; */ /* Выделяет жирным большим текстом */  
	background-color: #0483a0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
	background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
	background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
	background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
	background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
	background-image: linear-gradient(top, #31b2c3, #0483a0);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;      
	text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
}
  
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {		
	background-color: #31b2c3;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
	background-image: -webkit-linear-gradient(top,...