JSFiddle - React, Tailwind, and code Playground

by vacammar

HTML

<ul>
  <li class="container">
    <div class="exa-tree-box">
      <p>Testing </p>
      <div class="exa-tree-details">
        <p>key: value</p>
        <p>key: value</p>
        <p>key: value</p>
      </div>
    </div>
    <ul>
      <li>
        <div class="exa-tree-box">
          <p>Testing </p>
          <div class="exa-tree-details">
            <p>key: value</p>
            <p>key: value</p>
            <p>key: value</p>
          </div>
        </div>
      </li>
      <li>
        <div class="exa-tree-box">
          <p>Testing </p>
          <div class="exa-tree-details">
            <p>key: value</p>
            <p>key: value</p>
            <p>key: value</p>
          </div>
        </div>
      </li>
      <li class="container">
        <div class="exa-tree-box">
          <p>Testing </p>
          <div class="exa-tree-details">
            <p>key: value</p>
            <p>key: value</p>
            <p>key: value</p>
          </div>
        </div>
        <ul>
          <li>
            <div class="exa-tree-box">
              <p>Testing </p>
              <div class="exa-tree-details">
                <p>key: value</p>
                <p>key: value</p>
                <p>key: value</p>
              </div>
            </div>
          </li>
          <li>
            <div class="exa-tree-box">
              <p>Testing </p>
              <div class="exa-tree-details">
                <p>key: value</p>
                <p>key: value</p>
                <p>key: value</p>
              </div>
            </div>
          </li>
          <li>
            <div class="exa-tree-box">
              <p>Testing </p>
              <div class="exa-tree-details">
                <p>key: value</p>
                <p>key: value</p>
                <p>key: value</p>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="container">
    <p>Testing </p>
    <ul>
      <li>
        <div class="exa-tree-box">
 ...

CSS

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  padding-left: 1em;
}

li {
  padding-left: 1em;
  border: 1px solid black;
  border-width: 0 0 1px 1px;
}

li.container {
  border-bottom: 0px;
}

li.empty {
  font-style: italic;
  color: silver;
  border-color: silver;
}

li ul {
  border-top: 1px solid black;
  margin-left: -1em;
  padding-left: 2em;
}

ul li:last-child ul {
  border-left: 1px solid white;
  margin-left: -17px;
}

.exa-tree-box {
    border: 1px solid #d7d7d7;
    background-color: white;
    margin-top: 5px;
    max-width: 250px;
    min-height: 75px;
    padding: 3px;
    position: relative;
    z-index: 999;
}
.exa-tree-box > b {
  font-size: 20px;
  padding: 5px;
}
.exa-tree-view-detail {
  padding: 5px 5px 5px 5px;
  max-height: 70px;
  overflow-y: auto;  
}

.exa-tree-detail p {
  line-height: 5px;
}