JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<div class="searchLob">
    <input type="search" class="search searchInput" placeholder="Search the website"></input>
    <button onclick="Submit();" class="searchInputBtn">Search</button>
</div>
<input type="text" class="search searchInput" placeholder="Search the website"></input>

CSS

/* Reset HTML5 Search Input in Webkit */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}
input[type=search] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
}


input::-webkit-input-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input::-moz-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-ms-input-placeholder { 
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}

.searchLob{
	position: relative;
	display: inline-block;
	}

.searchInput{
	position: relative;
	border: 2px solid #d2d4d8;
	height: 44px;
	padding: 0 10px;
	background-color: #fff;
	width: 200px;
	margin: 2px 0 0 2px;
	float: left;
    text-transform: uppercase;
	}

.searchInputBtn{
	position: relative;
	float: left;
    border: medium none;
    color: #fff;
    cursor: pointer;
    font: 14px 'arial';
    height: 44px;
    margin-left: -4px;
    margin-top: 2px;
    text-decoration: none;
    text-transform: uppercase;
    width: 70px;
    background-color: #6692a7;
	}
	
.searchInputBtn:hover{
	background-color:#547e92;
	}



textarea:focus, input:focus, select:focus{
    border-color: #cccfd0;
	box-shadow: 0 1px 1px rgba(204, 207, 208, 0.075) inset, 0 0 8px rgba(204, 207, 208, 1);
	outline: 0 none;
	}