JSFiddle - React, Tailwind, and code Playground
HTML
<input class="brtel" value="test" />CSS
.brtel {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out, background-color 1.5s ease;
background-color: white;
width: 50px;
}
.brtel:focus {
border-radius: 0px;
border:none;
background:#797d7e;
color: #fff;
width: 200px;
}