JSFiddle - React, Tailwind, and code Playground

HTML

<input type ="text" class="animated-input" />

CSS

.animated-input {
    background: #000;
    border: none;
    border-radius: 5px;
    width: 40px;
    transition: width 1s, background 1s;
}

.animated-input:focus {
    background: #fff;
    width: 200px;
}