JSFiddle - React, Tailwind, and code Playground

by ryanwheale

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;
    position: relative;
}
.sub-forum {
    width: auto;
    height: 3em;
    color:#ffffff;
    background-color: rgba(12, 50, 69, 1);
    border: dotted;
    margin-left: 7em;
    position: relative;
}

.forum:before,
.forum:after,
.sub-forum:before,
.sub-forum:after {
    content: " ";
    position: absolute;
    left: -1.5em;
    top: -55%;
    bottom: 50%;
    z-index: -1;
}

.forum:before,
.sub-forum:before {
    border-left: 3px dotted #000;
}
.sub-forum:before {
    left: -4.5em;
    width: 3em;
    border-right: 3px dotted #000;
    box-sizing: border-box;
}

.forum:after,
.sub-forum:after {
    width: 1.5em;
    border-bottom: 3px dotted #f00;
}