JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<ul class="list">
  <li class="grp">
    <a href="#">Order Resources</a>
    <ul>
      <li class="grp-child"><a href="#">Get Order State</a></li>
      <li class="grp-child"><a href="#">Create Order</a></li>

    </ul>
  </li>

  <li class="grp">
    <a href="#">Product Resources</a>
    <ul>
      <li class="grp-child"><a href="#">Get Product</a></li>
      <li class="grp-child"><a href="#">Get Products</a></li>
    </ul>

CSS

li {
  margin-left: -2px;
  margin-bottom: 5px;
  padding-left: 9pt;
  list-style-type: none;
  white-space: normal;
  word-break: break-word;
  word-wrap: break-word;
}

ul {
  border-left: 2px solid #e0e2e8;
  margin-bottom: 20px;
  margin-top: 10px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  color: #F9F3FD;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
}

body {
  background-color: #000;
}

.grp-child {
  border-left: 2px solid #3c4151;
}

.child-sel {
  border-left: 2px solid #e0e2e8;
}

a.grp-sel,
a.child-sel {
  color: pink;
}

JavaScript

$('.list > li a').click(function() {

  var link = $(this);
  if (link.parent().hasClass("grp")) {
    $(".menu-sel").removeClass("grp-sel");
    link.addClass("menu-sel");
    link.parent().children("ul").toggle();
    var children = parent.children('ul');
  } else {
    $(".child-sel").removeClass("child-sel");
    link.addClass("child-sel");
  }

});