JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<ul class="collapsible"  data-collapsible="accordion">
		<li class="active">
		<div class="collapsible-header">Parent1</div>
 	  <div class="collapsible-body">
        
       <ul class="collapsible"  data-collapsible="accordion">
          <li class="active">
          <div class="collapsible-header">Parent1->Child1</div>
          <div class="collapsible-body">

             <ul class="collapsible"  data-collapsible="accordion">
              <li class="active">
              <div class="collapsible-header">Parent1->Child1->Child1</div>
              <div class="collapsible-body">

                 1

              </div>
              </li>
              <li class="active">
              <div class="collapsible-header">Parent1->Child1->Child2</div>
              <div class="collapsible-body">

                 2

              </div>
              </li>
             </ul>

          </div>
          </li>
          <li class="active">
          <div class="collapsible-header">Parent1->Child2</div>
          <div class="collapsible-body">

             2

          </div>
          </li>
       </ul>
      
    </div>
    </li>
 </ul>
 
 <ul class="collapsible"  data-collapsible="accordion">
		<li class="active">
		<div class="collapsible-header">Parent2</div>
 	  <div class="collapsible-body">
        
        2
      
    </div>
    </li>
 </ul>
 
 <ul class="collapsible"  data-collapsible="accordion">
		<li class="active">
		<div class="collapsible-header">Parent3</div>
 	  <div class="collapsible-body">
        
        3
      
    </div>
    </li>
 </ul>

CSS

.collapsible-header {
  background: rgba(255,248,224, 1);
}

JavaScript

$(document).ready(function(){
    $('.collapsible').collapsible({
      accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
    });
  });