JSFiddle - React, Tailwind, and code Playground

HTML

<form action="">
    <label for="box">I am a label</label>
    <input type="text" name="box" id="box">
</form>

CSS

form label {
    font-size: 23px;
}

#box {
    width: 0px;
    visibility: hidden;
    opacity: 0;
    
    -webkit-transition: 200ms;
    -moz-transition: 200ms;
    -ms-transition: 200ms;
    -o-transition: 200ms;
    transition: 200ms;        
}

#box:focus {
    visibility: visible;
    opacity: 1;    
    width: 50px;
}