JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<form action="http://www.whitewireweb.com">
    <div class="wrapper">
        <input type="text" class="searchinput" placeholder="Search..." />
        <input type="submit" class="btn"/>
    </div>
</form>

CSS

.wrapper {
    position:relative;
    width:30px;
    height:30px;
    float:right;
    margin-right:50px;
    margin-top:50px;
}
.btn {
    width:30px;
    height:30px;
    background-color:#000;
    position:absolute;
    left:0;
}

input[type=text] {
    position:absolute;
    left:0;
    width:10px;
    top:0;
    bottom:0;
    border-top:none;
    border-right:none;
    border-left:none;
    border-bottom:solid 1px;
    outline:none;
}

JavaScript

$(document).ready(function(e){
    $('.btn').on('click',function(e){
        
        var input_elm = $('.searchinput');
        if( !input_elm.hasClass('expanded') )
        {
            e.preventDefault();
        }
        
       input_elm.addClass('expanded').animate({'width':'150px','left':'-150px'}).focus();
    });
});