JSFiddle - React, Tailwind, and code Playground

HTML

<form class="form-search" method="get" action="/search" target="_blank">
			<input type="text" name="q" value="Что-то ищите?"  onfocus="if(this.value=='Что-то ищите?') this.value=''" onblur="if(this.value=='') this.value='Что-то ищите?'"/>
			<input src="/img/search.png" type="image" alt="поиск"/></form>

CSS

.form-search {
  display: inline-block;
  float: right;
  position: relative;
  right: 20px;
  top: 20px;
}

.form-search input {
  width: 100px;
  height: 25px;
  background:#2c2c2c; 
  outline: none;
  border: none;
  position: relative;
  right: 10px;
  top: 20px;
  border-radius: 15px;
}

.form-search:hover input {
	width: 200px;
}

.form-search input[type="image"]{
	background: url("/img/search.png") right no-repeat #2c2c2c;
	width: 19px;
	height: 17px;
	position: relative;
  	right: 35px;
  	top: 25px;
}

.form-search input[type="text"]{
	padding-left: 8px;
	color: #fff;
	font-size: 10px;
	font-family:'PF DinDisplay','Trebuchet MS',Arial;
    transition:all 0.3s ease-out 0s
}