JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <input type="text" id="menu">
  <label class="menu" for="menu">menu</label>
  <ul class="menu">
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
  </ul>
</div>

CSS

label.menu{
  
}
ul.menu{
  position:absolute;
  z-index:10;
  max-width:0;
  max-height:0;
  overflow:hidden;
  list-style-type:none;
  margin:0;
  padding:0;
  border:1px solid #bbb;
  transition:all 1s linear 0.05s;
}

input#menu{
  margin:0;
  padding:0;
  width:0;
  height:0;
  border:0;
  position:absolute;
  opacity:0;
}
input#menu:focus~label.menu{
  
}
input#menu:focus~ul.menu{
  max-width:100vw;
  max-height:100vh;
  transition:all 1s linear 0.05s;
}