JSFiddle - React, Tailwind, and code Playground

HTML

<div class="serch">
           
            <input type="text" name="serch" value=" " placeholder="...جستجو"style=" color:#666666;border-radius:5px;
 -webkit-box-shadow:0px 0px 2px #bababa, inset 2px 2px 2px #303030; 
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 2px 2px 2px #303030;  
 box-shadow:0px 0px 2px #bababa, inset 2px 2px 2px #303030; 
            margin-top:5px; margin-left:-3px; text-align:right;border:none; height:25px;      outline: none; position:static;" >
            </div>

CSS

.serch{
    width: 35px;
    height: 35px;
    background: red;
    -webkit-transition: width 2s;
    -webkit-transition-timing-function: ease-in-out;
    transition: width 2s;
    border:#000000 dashed 1px;
    position:absolute;
}
.serch:hover{
 width: 230px;
}