JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Forums">
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
    <div class="forum">Forum</div>
    <div class="forum">Forum</div>
      <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
      <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
      <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
      <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    <div class="sub-forum">Sub-forum</div>
      <div class="sub-forum">Sub-forum</div>
    <div class="sub-forum">Sub-forum</div>
    <div class="forum">Forum</div>
    <div class="category">Category</div>
    <div class="forum">Forum</div>
    
</div>

CSS

.category {
    width: 95%;
    height: 3em;
    background-color: rgba(46, 183, 255, 1);
    margin: 2em;
    margin-bottom: 0;
}
.forum {
    width: auto;
    height: 3em;
    background-color: rgba(30, 101, 141, 1);
    color:white;
    border: dotted;
    margin-left: 4em;
}

.sub-forum {
    width: auto;
    height: 3em;
    color:#ffffff;
    background-color: rgba(12, 50, 69, 1);
    border: dotted;
    margin-left: 7em;
}

JavaScript

var borderWidth="4px";
var borderColor="black";

for(var forum=0;forum<document.getElementsByClassName("forum").length;forum++){
var rect = document.createElement("div");
rect.style.margin="2.5em";
rect.style.border="dotted";
rect.style.borderWidth=borderWidth;
rect.style.borderColor=borderColor;
rect.style.position="absolute";

    if(document.getElementsByClassName("forum")[forum].previousElementSibling.className=="category"){
rect.style.top=document.getElementsByClassName("forum")[forum].previousElementSibling.offsetTop-10+"px";
rect.style.height=document.getElementsByClassName("forum")[forum].offsetTop - document.getElementsByClassName("forum")[forum].previousElementSibling.offsetTop-2+"px";
    }else{
rect.style.top=document.getElementsByClassName("forum")[forum-1].offsetTop-10+"px";
rect.style.height=document.getElementsByClassName("forum")[forum].offsetTop - document.getElementsByClassName("forum")[forum-1].offsetTop-2+"px";
    }
    
rect.style.width="100px";
rect.style.zIndex="-1";
document.body.appendChild(rect);
}

for(var subforum=0;subforum<document.getElementsByClassName("sub-forum").length;subforum++){
    
    var rect = document.createElement("div");
    rect.style.margin="2.5em";
    rect.style.marginLeft="5em"
    rect.style.border="dotted";
    rect.style.borderWidth=borderWidth;
    rect.style.borderColor=borderColor;
    rect.style.position="absolute";
   
    rect.style.top=document.getElementsByClassName("sub-forum")[subforum].previousElementSibling.offsetTop-10+"px";
    rect.style.height=document.getElementsByClassName("sub-forum")[subforum].offsetTop - document.getElementsByClassName("sub-forum")[subforum].previousElementSibling.offsetTop-2+"px";   
    
    rect.style.width="100px";
    rect.style.zIndex="-1";
    document.body.appendChild(rect);
    document.getElementsByClassName("sub-forum")[subforum].nextElementSibling.className;
}