JSFiddle - React, Tailwind, and code Playground

HTML

<div class="searchbox">
<input type="text" />
<button id="clearSearch">x</button>
</div>
<button id="reset">reset</button>

CSS

.searchbox {
    float: right;
}

JavaScript

$('#clearSearch').hide();
$('.searchbox input').keyup(function() {
    if($('.searchbox input').val() !== '') {
        if($('#clearSearch:hidden')) {
            $('.searchbox input').stop().animate({marginRight: 20}, {queue: false, duration: 500});
            $('#clearSearch').stop().fadeIn(500);
        }
    }
});

$('#reset').click(function(){
    $('#clearSearch').hide();
    $('.searchbox input').css({marginRight: 0});
    $('.searchbox input').val('');
});