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...

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: -18px;
}

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: 6px;
  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: '';
 ...