JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<form>
    <input type="text" />
    <button type="submit">O</button>
</form>

CSS

input {
    height: 40px;
    border-radius: 4px;
    border: 1px solid silver;
    float: right;
    opacity:0;
    width:0;
}

button {
    height:35px;
    width: 35px;
    background: transparent;
    color: #E2D8CE;
    border: none;
    font-weight: 700;
    font-size:31px;
    position: absolute;;
    top: 3px;
    right: 0;
}

form {
    position:relative;
    top: 50px;
    right:100px;
}

JavaScript

$(function(){
    $('button').mouseenter(function(){
        $('input').stop().clearQueue().animate({'width':200, 'opacity' : 1});
    }).mouseleave(function(){
        $('input').stop().clearQueue().animate({'width':0, 'opacity' : 0});
    }); 
});