JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li id="unhide" style="height:0.1px;
         opacity:0;">One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</nav>
<nav>
  <ul>
    <li id="unhide1" class='hide'>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</nav>

CSS

.hide {
  height:0.1px;
  opacity:0;
}

JavaScript

jQuery(document).ready(function($) {
    $("#unhide").mouseover(function() {
    $(this).css("opacity", '1');
    $(this).css("height", '');
    }).mouseout(function() {
    $(this).css("opacity", '0');
    $(this).css("height", '0.1px');
    });
    });
jQuery(document).ready(function($) {
    $("#unhide1").mouseover(function() {
    $(this).attr('class', '');
    }).mouseout(function() {
    $(this).attr('class', 'hide');
    });
    });