JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="drop-down" onClick="dropPanel(this)">Header 1</li>
  <div class="drop-down-panel">
      <a class="panel" href="#link1">Link 1</a>
      <a class="panel" href="#link2">Link 2</a>
  </div>
  <li class="drop-down" onClick="dropPanel(this)">Header 2</li>
  <div class="drop-down-panel">
      <a class="panel" href="#link3">Link 3</a>
  </div>
  <li class="drop-down" onClick="dropPanel(this)">Header 3</li>
  <div class="drop-down-panel">
      <a class="panel" href="#link4">Link 4</a>
      <a class="panel" href="#link5">Link 5</a>
  </div>
</ul>

CSS

ul {position: fixed;}

li {
    text-align: left;
    display: block;
    text-decoration: none;
}

li.drop-down {
    cursor: pointer;
    transition: 0s;
}

div.drop-down-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

a.panel {
    text-align: left;
    display: block;
    text-decoration: none;
}

JavaScript

var prevClick = -1;
dropPanel = function(t){
  var acc = document.getElementsByClassName("drop-down");

  for (i = 0; i < acc.length; i++) {  
    if(acc[i] === t){
    	t.classList.toggle("active");
      var panel = t.nextElementSibling;
      if(prevClick !== i) {
				panel.style.maxHeight = panel.scrollHeight + "px";
        prevClick = i;
      } else {
      	panel.style.maxHeight = "0px";
        prevClick = -1;
      }
    } else {
    	acc[i].classList.toggle("active");
      var panel = acc[i].nextElementSibling;
      panel.style.maxHeight = "0px";
    }
  }
}