JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree">
  <li id="" class="has-children showChildren">
    <div class="checkBoxDesign">
      <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509197182534205xy9w" value="8587509197182534205xy9w">
      <label for="t_8587509197182534205xy9w"></label>
    </div>
    <span class="text">Sand</span>
    <ul class="child">
      <li id="8587509198220874655a1s8" class="has-children showChildren">
        <div class="checkBoxDesign">
          <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198220874655a1s8" value="8587509198220874655a1s8">
          <label for="t_8587509198220874655a1s8"></label>
        </div>
        <span class="text">Fyllgrus</span>
        <ul class="child">
          <li id="8587496127195835630dojv" class="has-children showChildren">
            <div class="checkBoxDesign">
              <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496127195835630dojv" value="8587496127195835630dojv">
              <label for="t_8587496127195835630dojv"></label>
            </div>

            <span class="text">sub sub sub sub</span>
            <ul class="child">
              <li id="8587496127026996853ltmu">
                <div class="checkBoxDesign">
                  <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496127026996853ltmu" value="8587496127026996853ltmu">
                  <label for="t_8587496127026996853ltmu"></label>
                </div>

                <span class="text">sub sub</span>
              </li>
            </ul>
          </li>

          <li id="8587496924061602638qkdo" class="has-children showChildren">
            <div class="checkBoxDesign">
              <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496924061602638qkdo" value="8587496924061602638qkdo">
              <label for="t_8587496924061602638qkdo"></label>
            </div>
            <span class="text">sub sub</span>
...

CSS

/* CSS Tree menu styles */

ul.tree {
  height: 64%;
  overflow-y: auto;
  /**
 * Create the checkbox state for the tick
 */
}

ul.tree li {
  position: relative;
  list-style: none;
  padding-left: 5px;
  margin-bottom: 5px;
}

ul.tree li i {
  width: 14px;
  height: 14px;
  color: #606060;
  border: 1px solid #606060;
  padding-left: 4px;
  font-size: 10px;
  position: absolute;
  padding-right: 4px;
  margin-top: 2px;
  cursor: pointer;
}

ul.tree li .fi-plus::before,
ul.tree li .fi-minus::before {
  left: 2px;
  position: absolute;
  top: 1px;
}

ul.tree li i.disabled {
  width: 12px;
  height: 12px;
  background-color: #606060;
  border-radius: 50%;
  position: absolute;
  left: 32px;
  top: 1px;
}

ul.tree li i.leafNodes {
  width: 10px;
  height: 10px;
  top: 5px;
  left: 8px;
  border-radius: 50%;
  background-color: #606060;
}

ul.tree li .text {
  margin-left: 55px;
}

ul.tree li input {
  position: absolute;
  left: 25px;
  top: 5px;
}

ul.tree li::before {
  content: '';
  position: absolute;
  height: 1px;
  background: #666;
  top: 11px;
  width: 30px;
  left: -15px;
}

ul.tree > li:before {
  display: none;
}

ul.tree li.has-children::before {
  width: 23px;
}

ul.tree li > ul.child {
  /*margin-left : 24px;*/
  /*margin-left: 20px;*/
  margin-top: 3px;
  position: relative;
  padding-left: 4px;
}

ul.tree ul.child::before {
  content: '';
  position: absolute;
  width: 1px;
  background: #666;
  top: -9px;
  bottom: 10px;
  left: -14px;
}

ul.tree li.has-children > ul {
  display: none;
}

ul.tree li.showChildren > ul {
  display: block;
}

ul.tree input[type=checkbox] {
  visibility: hidden;
}

ul.tree .checkBoxDesign {
  width: 26px;
  position: absolute;
  top: 5px;
  left: 25px;
}

ul.tree .checkBoxDesign label {
  cursor: pointer;
  position: absolute;
  width: 14px;
  height: 14px;
  top: 0;
  left: 0;
  background: #fff;
  border: 1px solid #606060;
  margin-top: -3px;
}

ul.tree .checkBoxDesign label:after {
  opacity: 0;
  content: '';
 ...