JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search" class="form-box">
    <form action="/search/">
    <input id="form" type="text" name="q" placeholder="Поиск товара..." value=""  maxlength="50" autocomplete="off">
    
    </form>
    </div><input name="s" type="submit" value="jr"  id="submit">

CSS

div.form-box	{
		position: relative;
		z-index: 2;
		left: 20px;
		top: 20px;/*22px;*/
		margin: 0;
		padding: 0;
}

	#form {
		position: absolute;
		height: 30px;/*24px;*/
		margin: 0;
		padding: 0 7px;
		width: 270px;

		border-top: transparent;
		border-bottom: transparent;
		border-left: 1px solid #000;
		border-right: 1px solid #000;	

	}
#form:focus {
		box-shadow: inset 0 0 2px #DB9900;
		-webkit-box-shadow: inset 0 0 2px #DB9900;
		-moz-box-shadow: inset 0 0 2px #DB9900;
}