JSFiddle - React, Tailwind, and code Playground

HTML

<input class="Hdr_nav_search_input" />
<div class="Hdr_nav_search_box" /><span>search for location....</span><i>for example: blah blah</i></div>

CSS

.Hdr_nav_search_box{
	padding: 0 5px;
	margin: 7.5px 0;
	width:300px;
	height: 25px;
	background: white;
}
.Hdr_nav_search_input:focus .Hdr_nav_search_box{
	color: #d4d4d4;
}
.Hdr_nav_search_box span,.Hdr_nav_search_box i{
	line-height: 25px;
	color: gray;
}
.Hdr_nav_search_input{
	padding: 0 5px;
	margin: 7.5px 0;
	border: 0;
	z-index: 2;
	position: absolute;
	width:300px;
	height: 25px;
	background: transparent;	
}