JSFiddle - React, Tailwind, and code Playground

by oscbco

HTML

<div id='root'></div>
  <div class="tree-panel">
    <div class="tree-node">
      <span class="node-border-container">
        <span class="node-border"></span>
      </span>
      <span class="node-text">Node 1</span>
      <div class="tree-node">
        <span class="node-border-container"><span class="node-border"></span></span>
        <span class="node-text-control">+</span>
        <span class="node-text"> Node 1.1</span>

    <div class="tree-node">
      <span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1</span>
      <div class="tree-node"><span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1.1</span></div>
      <div class="tree-node"><span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1.2</span>
    <div class="tree-node">
      <span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1</span>
      <div class="tree-node"><span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1.1</span>
    <div class="tree-node">
      <span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1</span>
      <div class="tree-node"><span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1.1</span></div>
      <div class="tree-node"><span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1.2</span></div>
      <div class="tree-node"><span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1.3</span></div>
    </div>  
      </div>
      <div class="tree-node"><span class="node-border-container"><span class="node-border"></span></span><span class="node-text">Node 1.2</span></div>
      <div class="tree-node"><span...

CSS

*{
      font-family: sans;
    }
    .tree-panel {
      /*background: red;*/
    }

    .node-border-container{
      background: lightgreen;
      position: relative;
    }
    .node-text{
      /*background: lightblue;*/
      background: white;
      margin-left:0.5rem;
      position: relative;
      /*z-index: 9999;*/
    }
    .tree-node:last-child {
      border-left: none;
    }
    .tree-node {
      position: relative;
      border-left: 1px dotted #888;
      padding:0;
      margin:0;
      margin-bottom:1px;
      margin-left: 1rem;
      opacity: .99;
      z-index: 999;
    }
    .node-border{
      position: absolute;
      top: 0;
      left:1px;
      border-bottom: 1px dotted #888;
      width: 1rem;
      height: 52%;
      opacity: .99;
      z-index: 0;
    }    
    .tree-node:last-child>.node-border-container>.node-border{
      border-left: 1px dotted #888;
      z-index: 0;
      opacity: .99;
      left:0px;
      height: 63%;

      top: -1px;

      top: -2px;
      border-bottom-left-radius: 0px;
      border-bottom-left-radius: 6px;


    }
    .node-text-control{
      margin:0;
      padding: 0;

      background: white;
      border: 1px dotted #888;
      border-radius: 4px;
      color: #888;

      margin-right: -0.7rem;
      margin-left: 0.4rem;

      padding-right: 0.14rem;
      padding-left: 0.14rem;
      line-height: 1rem;


      display: inline-block;
      font-weight: bolder;
      z-index: 999;
      transform: scale(0.75, 0.8);
    }