JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<ol class="tree">
  <li>
    <label for="folder1">Folder 1</label>
    <input type="checkbox" id="folder1" />
    <ol>
      <li class="file"><a href="">File 1</a></li>
      <li>
        <label for="subfolder1">Subfolder 1</label>
        <input type="checkbox" id="subfolder1" />
        <ol>
          <li class="file"><a href="">File 1</a></li>
          <li>
            <label for="subsubfolder1">Subfolder 1</label>
            <input type="checkbox" id="subsubfolder1" />
            <ol>
              <li class="file"><a href="">File 1</a></li>
              <li>
                <label for="subsubfolder2">Subfolder 1</label>
                <input type="checkbox" id="subsubfolder2" />
                <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 class="file">
                    <label for="subsubsubfolder3">Subfolder 1</label>
                    <input type="checkbox" id="subsubsubfolder3" />
                    <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>
                    </ol>
                  </li>
                </ol>
              </li>
            </ol>
          </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 class="file"><a href="">File 6</a></li>
        </ol>
      </li>
    </ol>
  </li>
  <li>
    <label for="folder2">Folder 2</label>
    <input type="checkbox" id="folder2" />
    <ol>
      <li class="file"><a href="">File 1</a></li>
     ...

SCSS

ol.tree {
  padding: 0 0 0 30px;
  width: 300px;
  li {
    position: relative;
    margin-left: -15px;
    list-style: none;
    &.file {
      margin-left: -1px !important;
      a {
        //background: url(document.png) 0 0 no-repeat;
        color: #000;
        padding-left: 21px;
        text-decoration: none;
        display: block;
      }
      a[href * '.pdf'],
      a[href * '.html'],
      a[href * '.css'],
      a[href * '.js'] {
        //background: url(document.png) 0 0 no-repeat;
      }
    }
    input {
      position: absolute;
      left: 0;
      margin-left: 0;
      opacity: 0;
      z-index: 2;
      cursor: pointer;
      height: 1em;
      width: 1em;
      top: 0;
      & + ol {
        //background: url(toggle-small-expand.png) 40px 0 no-repeat;
        margin: -0.938em 0 0 -44px;
        /* 15px */
        height: 1em;
        > li {
          display: none;
          margin-left: -14px !important;
          padding-left: 1px;
        }
      }
      &:checked {
        & + ol {
          //background: url(toggle-small.png) 40px 5px no-repeat;
          margin: -1.25em 0 0 -44px;
          /* 20px */
          padding: 1.563em 0 0 80px;
          height: auto;
          > li {
            display: block;
            margin: 0 0 0.125em;
            /* 2px */
            &:last-child {
              margin: 0 0 0.063em;
              /* 1px */
            }
          }
        }
      }
    }
    label {
      //background: url(folder-horizontal.png) 15px 1px no-repeat;
      cursor: pointer;
      display: block;
      padding-left: 37px;
      color: #F60;
    }
  }
}