JSFiddle - React, Tailwind, and code Playground

HTML

Menu:
<div class="menu">
  <ul>
    <input type="checkbox" value="Option 1" />
    <ul>
      <li><a>Option 1</a></li>
      <li><a>Option 2</a></li>
    </ul>
    <input type="checkbox" value="Option 2" />
    <ul>
      <li><a>Option 1</a></li>
      <li><a>Option 2</a></li>
    </ul>
  </ul>
</div>

CSS

.menu {
  left: 2em;
  display: block;
  font-family: Arial;
  font-size: 15px;
}

.menu ul {
  position: relative;
}

.menu input[type=checkbox] {
  display: block;
  width: 0px;
  height: 20px;
  font-family: inherit;
  font-size: inherit;
}

.menu input[type=checkbox]::after {
  display: list-item;
  position: absolute;
  height: inherit;
  content: attr(value);
}

.menu input + ul {
  display: none;
}

.menu input:checked + ul {
  display: block;
}