JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="myUL">
  <div class="menu-text">
    <li>
      <span class="caret treeparent ripple">Menu 1<i class="fas fa-chevron-down arrow"></i></span>
         <ul class="nested nav nav-pills flex-column tog">
           <li class="nav-item" rel="0">
             <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
           </li>
           <li class="nav-item" rel="1">
             <a class="nav-link" href="javascript:window.location.reload(true)">Sub 2</a>
           </li>
         </ul>
     </li>
     <li>
      <span class="caret treeparent ripple">Menu 2<i class="fas fa-chevron-down arrow"></i></span>
         <ul class="nested nav nav-pills flex-column tog">
           <li class="nav-item" rel="0">
             <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
           </li>
         </ul>
     </li>
  </div>
</ul>

CSS

ul, #myUL {
    list-style-type: none;
}
  
#myUL {
    margin: 0;
    padding: 0;
}
  
.caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    font-size: 17px;
}
  
.arrow{
    margin-right: 9px;
    float: right;
    vertical-align:middle;
    padding: 4px;
}
  
.caret-down::before {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);  
}
  
.nested {
    display: none;
    margin: 10px;
}
  
.active {
    display: block;
}

.treeparent {
    display: table-cell;
    overflow: auto;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    height: 35px;
    /* font-family: sans-serif; */
    font-size: 12.8px;
    color: #007BFF;
    margin: 3px;
    width: 260px;
    vertical-align:middle;
    padding: 2px;
}

.treeparent:hover {
    background-color: #cee0f5;
    color: black;
    transition: background 0.5s;
}

.arrow {
    -moz-transition: transform 0.6s;
    -webkit-transition: transform 0.6s;
    transition: transform 0.6s;
  }
  
.flip {
    transform: rotate(-180deg);
}

.ripple {
    background-position: center;
  }

.ripple:hover {
    background: #cee0f5 radial-gradient(circle, transparent 5%, #a8cdf7 1%) center/15000%;
}

.ripple:active {
    background-color: #6eb9f7;
    background-size: 100%;
    transition: background 0s;
}

JavaScript

$(".treeparent").click(function () {
  $(this).next('.tog').slideToggle();
  $(".arrow", this).toggleClass('flip');
});

$("#myUL ul.tog li a").click( function() {
                      var value = $(this).parent("li").attr("rel");
                      $("#myUL ul.main li").removeClass("highlight");
                      $(this).parent("li").addClass("highlight");
                      localStorage.setItem('pms' , JSON.stringify(value));

                      console.log('Stored menu: ' + value);
                  });

                  //var value = localStorage.getitem('pms');
                  var retrievedObject = JSON.parse(localStorage.getItem('pms'));
                  if(retrievedObject) {
                      $("#myUL ul.tog li[rel=" + retrievedObject + "] ul").slideToggle();
                      $("#myUL ul.tog li").removeClass("highlight");
                      $("#myUL ul.tog li").find("span.current-page").remove();
                      $("#myUL ul.tog li[rel=" + retrievedObject + "]").addClass("highlight").append("<span class=\"current-page\"></span>");

                      $("#myUL ul.tog li li").removeClass("highlight");
                      $("#myUL ul.tog li li").find("span.current-page").remove();
                  }