JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hover1">Show me on hover</div>
        <div style="float: left; position: relative; left: 50%; margin-top: 237px;">
            <img src="img/octo_logo.png" class="logo" />
        </div>
        <!-- MENU start -->
        <div id="menu">
            <ul>
                <li><a href="bio.html"><span>BIO</span></a></li>
                <li><a href="equipa.html"><span>EQUIPA</span></a></li>
                <li><a href="reconhecimento.html"><span>RECONHECIMENTO</span></a></li>
                <li><a href="parceiros.html"><span>PARCEIROS</span></a></li>
                <li><a href="porque_nao.html"><span>PORQUE NÃO?</span></a></li>
                <li><a href="contactos.html"><span>CONTACTOS</span></a></li>
            </ul>
        </div>

CSS

#hover1{
    width: 155px;
    height: 100px;
    background-color: #57C194;
    float:left;
    position: absolute;
    display: none;
    bottom: 0;
}

JavaScript

$(function() {
    // DOM ready
    
    $('#menu a').hover(
      function () {
          $('#hover1').show();
      }, 
      function () {
          $('#hover1').hide();
      });
  
});