JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div>
    <label for="list1" class="localnav-categories-label">
      <span class="ln-header">categories</span>
    </label>
    <input type="checkbox" id="list1" class="checkbox1">
    <nav class="list-wrap">
      <ul>
        <li>
          <a href="#">one</a>
        </li>
        <li>
          <a href="#">two</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

CSS

.ln-header {
    cursor: pointer;
}

.ln-header::after {
    content: "+";
    margin-left: 10px;
    transition: 400ms;
}

.list-wrap {
    display: none;
}

.checkbox1:checked + .list-wrap {
    display: block;
}

.checkbox1:checked + .ln-header::after {
    transform: rotate(45deg);
}

.checkbox1:checked + .ln-wrap::after {
    transform: rotate(45deg);
}

.checkbox1 {
    display: none;
}