JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar-wrapper">
            
            <ul id="sidebar-left">
                
                <li>
                    <ul class="firstUl">
                        <li class="submenu-ebene1 link inactive closed">Link 1</li>
                        <li>
                            <ul class="submenu-ebene2">
                                <li class="link inactive closed">Sublink 1</li>
                                <li>
                                    <ul class="submenu-ebene3">
                                        <li class="link inactive">Snippet 1</li>
                                        <li class="link inactive">Snippet 2</li>
                                    </ul>
                                </li>
                                
                                <li class="link inactive closed">Sublink ddddd2</li>
                                <li>
                                    <ul class="submenu-ebene3">
                                        <li class="link inactive">Snippet 1</li>
                                        <li class="link inactive">Snippet 2</li>
                                    </ul>
                                </li>

                            </ul>
                        </li>
                        
                        <li class="submenu-ebene1 link inactive closed">Link 2</li>
                        <li>
                            <ul class="submenu-ebene2">
                                <li class="link inactive closed">Sublink 1</li>
                                <li>
                                    <ul class="submenu-ebene3">
                                        <li class="link inactive">Snippet 1</li>
                                        <li class="link inactive">Snippet 2</li>
                                    </ul>
                                </li>
                                
                                <li class="link inactive closed">Sublink...

CSS

#sidebar-wrapper {
    width: 280px;
    height: auto;
    float: left;
    position: relative; 
}   

#sidebar-left {
    width: 280px;
    height: auto;
    font-size: 14px;
    background: #ff8000;
    border-right: 10px solid #333;
}

#sidebar-left li {
  list-style: none;
}



.last.closed {
  border-bottom: none;
}

.submenu-ebene2 {  
  font-size: 1em;
  font-weight: normal;
  background: #222;
  color: #ccc;
}

.submenu-ebene3 {  
  font-size: 0.9em;
  font-weight: normal;
  margin-left: 0px;
  cursor: pointer;
  background: #222;
  color: #ccc;
}

.submenu-ebene3 li {  
  padding-left: 30px;
}

.link, .single-link {
  border-bottom: 1px dotted #222;
  padding: 10px;
}

.link.last, .single-link.last {
  border-bottom: none;
  margin-bottom: 10px;
}

.active {
  background: #333;
  color: #ccc;
}

.inactive {
    color: #333;
    -o-transition:.2s linear;
    -ms-transition:.2s linear;
    -moz-transition:.2s linear;
    -webkit-transition:.2s linear;
}

.inactive:hover {
  background: #333;
  color: #ccc;
}

.submenu-ebene2 {
     display: none;   
}

.submenu-ebene3 {
     display: none;   
}
}

JavaScript

$(".firstUl li").click(function (e) {
        $(this).next("li").children(".submenu-ebene2").stop().slideToggle();
});

$(".submenu-ebene2 li").click(function() {
    $(this).next("li").children(".submenu-ebene3").stop().slideToggle();
});