JSFiddle - React, Tailwind, and code Playground

HTML

<span class="btn btn-menu-toggle">btn</span>
<ul class="menu">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
</ul>
<hr>
<span class="btn btn-menu-toggle">btn</span>
<ul class="menu">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
</ul>
<hr>
<span class="btn btn-menu-toggle">btn</span>
<ul class="menu">
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>text5</li>
</ul>

CSS

html, body {
  height: 100%;
}
.btn {
  border: 1px solid red;
  padding: 5px 10px;
}
.btn-menu-toggle {
  background: #f00;
  cursor: pointer;
}
.btn-menu-toggle.active {
  background: orange;
}
.menu {
  display: none;
  background: rgba(0,0,0,0.7);
  width: 300px;
}

JavaScript

$('.btn-menu-toggle').click(function() {
  $(this).next('.menu').slideToggle()
    .siblings('.menu').slideUp();
  $(this).toggleClass('active')
    .siblings('.btn-menu-toggle').removeClass('active');
});