JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="suggestinput">
<div id="suggestions"></div>

CSS

#suggestinput{
    width: 300px;
    height: 40px;
    background: black;
    border: 2px grey solid;
    color: white;
    font-size: 16px;
    }
#suggestions.active{
    background:black;
    width:300px;
    height: 100px;
    border: 2px grey solid;
    color:white;
    
}
#suggestions.hide {
    display:none;
}

JavaScript

$("#suggestinput").on({
  keydown: function(){
    $("#suggestions").addClass("active");
  },
  blur: function () {
    $("#suggestions").removeClass('active');
  },
  keyup: function () {
      if ( $(this).val() == "" ) {
        $("#suggestions").removeClass('active');
      }
  },
 //another event to know if input is empty while on focus, then removeClass('active');
});