JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div class="b_t_menu3">
  <div class="b_search">
    <form method="get" class="search-form" action="http://www.google.com/search" target="top">
<input name="sitesearch" value="Site içi arama" type="hidden">
<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="q" title="Search for..." />
<input type="submit" class="search-submit" value="Search" />
</form>
  </div>       
  <div class="b_invitation"><a href="#">Menu</a></div>
  
        </div>

CSS

.b_t_menu3 {
	float:left;
	width:259px;
	height:35px;
	margin-left:2px;
  border:1px solid #000;
}
.b_invitation {
	float:left;
	width:auto;
	height:35px;
	margin-left:52px;
  z-index:-3;
	}
.b_invitation a{
	color:#545454;
	font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
	text-decoration:none;
	line-height:35px;
	font-size:11px;
	}

.b_search {
 float:left;
  width:auto;
  height:35px;
  background-color:#fff;
  position:absolute;
}
.search-form .search-submit {
	display: none;
}
input[type="search"] {
	-webkit-appearance: textfield;
	width: 0;
}
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
.search-form {
	
	right: 10px;
	top: 0px;
}
.search-field {
	background-color: transparent;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABXUlEQVRIid2VMW4CMRBFTWsK5v+ZIlvBEZIWOAHcCcItkoI+6baHgosAKWgCV0jkFNgSIsLsLoqQMpK7r3l/Z+y/zt2jAAxJmaiiVMU2npKUCYBB48YiIqqcmzHkjirnIiK1mpPsm2F9bIK9GWcAxt77wntfABiZ8dmMn1GzJtmv1BxAxwyb6G4pIr3MV3ZVuUgQAJ2rgDQWVS6dc60KnloJosr5NfeD6OaQc35eItKLowwAhheFpEzj8mZVm6cy48yMgZTpRZEqyuhiVBcQFx9UUeYAWzOGdrv9UBfgvS8iYJsDfJgxeO+L5gDucoA0onFdAIBxvCCriyJSJrcvGS85F+ma7htc04MqvkTkKSu+5aGZ4a2KG0k5FKOim9GeRAVDBTPHimG3OQu70e+wO77e01MZAqBzLa5V8W2Gd+ecawSJoLMfDndmWJnhVUQeT7WNIXXqf0H+rPnd6gc2Q5KYa5pwPgAAAABJRU5ErkJggg==);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	width: 0;
	height: 35px;
	margin: 0px 0;
	padding: 0 0 0 35px;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition: width 400ms ease, background 400ms ease;
  
}
.search-field:focus {
	background-color: #fff;
	border: 2px solid #ccc;
	cursor: text;
	outline: 0;
	width: 259px;
}