JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="searchbar">
            <form name="Search">
                <input type="text" name="Search" value="Pesquisar...">
            </form>
        </div>
    </body>

CSS

div#searchbar {
    padding: 10px;
    background-color: #404040;
}

.searchbar input {
    width: 300px;
    box-sizing: border-box;
    padding: 10px;
    font-family: Open Sans;
    font-size: 16px;
    color: #404040;
    outline: none;
    background-color: #909090;
    padding-left: 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

.searchbar input:hover {
    width: 100%;
}