JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body><div id="search">
 <form action="search.php" method="POST">
 <span class="glyphicon glyphicon-search" style="font-size: 20px;"></span>
 <input type="text" class="search" name="search" placeholder="search for diamonds" /> <button type="submit" id="searchButton"><span class="glyphicon glyphicon-search"></span> Search</button>
 </form>
    </div></body>

CSS

#search {
	width: 90%;
	margin: 20px auto;
	background-color: #23507c;
	color: white;
	padding: 0 7px;
}
.search {
	background-color: #23507c;
	border: none;
	padding: 5px;
	outline: none;
	width: 86.8%;
	font-size: 18px;
	display: inline-block;
    margin-top: -150px;
}
.search::-webkit-input-placeholder { 
    color: white;
	font-size: 18px;
}
.search:-moz-placeholder { 
   color: white
   opacity:  1;
   font-size: 18px;
}
.search::-moz-placeholder { 
   color: white
   opacity:  1;
   font-size: 18px;
}
.search:-ms-input-placeholder { 
	color: white
	font-size: 18px;
}
#searchButton {
	padding: 3px;
	color: #555555;
	font-size: 25px;
	margin: 3px 0;
}