JSFiddle - React, Tailwind, and code Playground

HTML

<p>şerveţele umede</p>

<input type="text" class="search" placeholder="Search..." />

CSS

p,  input.search{
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
p:hover {
    color: #E64141;
    padding: 0 0 0 5px;
}

input.search {
     width: 50px;   
}
input.search:focus {
      width: 250px;   
}