JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Stripped down version of Collapsible Accordion Vertical Tree Menu found at:
http://www.thecssninja.com/css/css-tree-menu
-->

<body>
  <ol class="menutree">
    <li> <label for="folder1">Folder 1</label> <input type="checkbox" id="folder1" class="chckBx" />
      <ol>
        <li class="file"><a href="#">File 1</a></li>
        <li class="file"><a href="#">File 2</a></li>
        <li class="file"><a href="#">File 3</a></li>
        <li> <label for="subfolder1a">Subfolder 1a</label> <input type="checkbox" id="subfolder1a" class="chckBx" />
          <ol>
            <li class="file"><a href="#">File 1</a></li>
            <li class="file"><a href="#">File 2</a></li>
            <li class="file"><a href="#">File 3</a></li>
            <li class="file"><a href="#">File 4</a></li>
            <li class="file"><a href="#">File 5</a></li>
            <li> <label for="subfolder1b">Subfolder 1b</label> <input type="checkbox" id="subfolder1b" class="chckBx" />
              <ol>
                <li class="file"><a href="#">bird_tree</a></li>
                <li class="file"><a href="#">buddha</a></li>
                <li class="file"><a href="#">WorkingTree</a></li>
                <li class="file"><a href="#">Subfile 4</a></li>
                <li class="file"><a href="#">Subfile 5</a></li>
                <li class="file"><a href="#">Subfile 6</a></li>
              </ol>
      </ol></li>
  </ol></li>
<li> <label for="folder2">Folder 2</label> <input type="checkbox" id="folder2" class="chckBx" />
  <ol>
    <li class="file"><a href="#">File 1</a></li>
    <li> <label for="subfolder2a">Subfolder 2a</label> <input type="checkbox" id="subfolder2a" class="chckBx" />
      <ol>
        <li class="file"><a href="#">Subfile 1</a></li>
        <li class="file"><a href="#">Subfile 2</a></li>
        <li class="file"><a href="#">Subfile 3</a></li>
        <li class="file"><a href="#">Subfile 4</a></li>
        <li class="file"><a href="#">Subfile 5</a></li>
        <li...

CSS

/* Stripped down version of Collapsible Accordion Vertical Tree Menu found at:
   http://www.thecssninja.com/css/css-tree-menu
*/

/* Ninja Beginning of purely decoration styles */

*, html { font-family: Verdana, Arial, Helvetica, sans-serif;
          margin: 0px;  padding: 0px;
}


body { background-color: grey;   /* page background */
       color: white;             /* default text color */
       width: 90%;
       margin: auto;             /* centers the page */
       }

img { border: none; }

/*-- End of purely decoration styles --*/

/*-- Beginning of CSS Tree menu styles --*/

ol.menutree
{
    width: 300px;            /* Width of menu box */
}
    .menutree li    /* default condition for all menu boxes */
    {
        position: relative;     /* Prevents objects from piling on top of each other */
        list-style: none;       /* No extra boxing - prevents list bullets */
        border: 1px solid red;  /* temporary for postition identification */
    }
    li.file  /* default condition of file boxes in menu */
    { }
        li.file a       /* location and appearance of elements in repeatedly used "file" class */
        {
            color: white;
            text-decoration: none;
            display: block;
        }


/* From here on it's all about the "input" checkboxes */

    li .chckBx             /* controls the checkboxes */
    {
        position: absolute;  /* prevents invisible checkbox from using space */
        opacity: 10%;          /* invisible checkboxes */
        cursor: pointer;
        height: 1em;
        width: 1em;
        top: 0;

        display: block;      /* display children (files and submenus) below checked label */
    }

        li .chckBx + ol    /* Default Top level menu, and only before submenus open */
        {    }


        li .chckBx + ol > li      /* All file and directory children below current directory */
         {
           display: none;          /* Prevents visibility of child (files and...