JSFiddle - React, Tailwind, and code Playground

HTML

<div id="subscribe-floating-box">
    <form action="">
    <input type="text" name="email"  value="Email Address" id="subscribe-field" onclick="if ( this.value == 'Email Address' ) { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = 'Email Address'; }">
        
    <input type="text" name="action" value="subscribe">
    <input type="text" name="source" value="http://example.com">
    <input type="text" name="redirect_fragment" value="blog_subscription-2">
    <input type="submit" value="Subscribe" name="jetpack_subscriptions_widget">
    </form>
    </div>
<input type="button" value="button" onClick="ShowHide(); return false;" class="cart-buttom">

JavaScript

$(function() {
      var thisID =  setTimeout(function() {
            $("#subscribe-floating-box").animate({"height": "toggle"}, { duration: 300 });
        }, 3000);
      
      $('#subscribe-field').focus(function(){
          clearTimeout(thisID);
      });
    });

   function ShowHide(){
       $("#subscribe-floating-box").animate({"height": "toggle"}, { duration: 300 });
    }