JSFiddle - React, Tailwind, and code Playground

by leonsaysHi

HTML

<div class="hierarchy">
  <div class="item item--sup">
    <div class="item__deco">
      <div class="item__card"></div>
    </div> 
  </div>
  <div class="item item--self">
    <div class="item__deco">
      <span class="item__arrow"></span>
      <div class="item__card"></div>
    </div>
  </div>
  <div class="subs-deco"></div>
  <div class="subs">

    <span class="subs__rows-deco"></span>
    <div class="item">
      <div class="item__deco">
        <span class="item__arrow"></span>
        <div class="item__card"></div>
      </div>
    </div>

    <span class="subs__rows-deco"></span>
    <div class="item">
      <div class="item__deco">
        <span class="item__arrow"></span>
        <div class="item__card"></div>
      </div>
    </div>

    <span class="subs__rows-deco"></span>
    <div class="item">
      <div class="item__deco">
        <span class="item__arrow"></span>
        <div class="item__card"></div>
      </div>
    </div>

    <span class="subs__rows-deco"></span>
    <div class="item">
      <div class="item__deco">
        <span class="item__arrow"></span>
        <div class="item__card"></div>
      </div>
    </div>

    <span class="subs__rows-deco"></span>
    <div class="item">
      <div class="item__deco">
        <span class="item__arrow"></span>
        <div class="item__card"></div>
      </div>
    </div>

    <span class="subs__rows-deco"></span>
    <div class="item">
      <div class="item__deco">
        <span class="item__arrow"></span>
        <div class="item__card"></div>
      </div>
    </div>
    
    <span class="subs__rows-deco"></span>
    <div class="item">
      <div class="item__deco">
        <span class="item__arrow"></span>
        <div class="item__card"></div>
      </div>
    </div>
    
    <span class="subs__rows-deco"></span>
    <div class="item">
      <div class="item__deco">
        <span class="item__arrow"></span>
        <div class="item__card"></div>
      </div>
    </div>

  </div>
</div>

CSS

.hierarchy {
  --paths-thickness: 2px;
  --arrows-thickness: 6px;
  --arrows-gutter-v: 20px;
  --arrows-gutter-h: 10px;
  --arrows-color: grey;
  display: grid;
  grid-template-columns: [deco] calc(var(--arrows-gutter-h) * 2) [items] auto [end];
  grid-template-rows: [sup] auto [self] auto [subs-deco] auto [subs] auto [end];
}

.item--sup {
  grid-column: deco / end;
  grid-row: sup / span 1;
}

.item--self {
  grid-column: deco / end;
  grid-row: self / subs-deco;
}

.item--sup .item__deco,
.item--self .item__deco {
  position: relative;
}

.item--sup .item__deco {
  padding-bottom: var(--arrows-gutter-v);
}

.item--sup .item__deco:after {
  content: '';
  position: absolute;
  height: var(--arrows-gutter-v);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--paths-thickness);
  background-color: var(--arrows-color);
}

.item--sup+.item--self .item__deco {
  padding-top: var(--arrows-thickness);
}

.item--sup+.item--self .item__deco:before {
  content: '';
}

.subs-deco {
  position: relative;
  grid-column: deco / end;
  grid-row: subs-deco / subs;
  height: var(--arrows-gutter-v);
}

.subs-deco:before {
  content: '';
  position: absolute;
  height: var(--arrows-gutter-v);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--paths-thickness);
  background-color: var(--arrows-color);
}

.subs-deco:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--paths-thickness);
  width: 50%;
  background-color: var(--arrows-color);
}

.subs .item__deco {
  position: relative;
  margin-left: calc(var(--arrows-gutter-h) * -1);
  padding-left: var(--arrows-gutter-h);
  padding-top: var(--arrows-gutter-v);
  padding-bottom: var(--arrows-gutter-v);
}

.subs .item__deco:after {
  content: '';
  position: absolute;
  width: calc(var(--arrows-gutter-h) * 2);
  height: var(--paths-thickness);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--arrows-color);
}

.subs...