JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>
    <span class="object">
      <span class="kv type">
        <span class="key">type</span>
        <span class="value reference">Implementation</span>
      </span>
      <span class="kv">
        <span class="key">function</span>
        <span class="value reference">All</span>
      </span>
      <span class="kv">
        <span class="key">list</span>
        <span class="value list">
          <span class="object">
            <span class="kv type">
              <span class="key">type</span>
              <span class="value reference">Integer</span>
            </span>
            <span class="kv">
              <span class="key">value</span>
              <span class="value string">"6"</span>
            </span>
          </span>
          <span class="object">
            <span class="kv type">
              <span class="key">type</span>
              <span class="value reference">Integer</span>
            </span>
            <span class="kv">
              <span class="key">value</span>
              <span class="value string">"123"</span>
            </span>
          </span>
        </span>
      </span>
      <span class="kv">
        <span class="key">composition</span>
        <span class="value object">
          <span class="kv type">
            <span class="key">type</span>
            <span class="value reference">Function call</span>
          </span>
          <span class="kv">
            <span class="key">function</span>
            <span class="value reference">If</span>
          </span>
          <span class="kv">
            <span class="key">condition</span>
            <span class="value object">
              <span class="kv type">
                <span class="key">type</span>
                <span class="value reference">Function call</span>
              </span>
              <span class="kv">
                <span class="key">function</span>
                <span class="value reference">Empty</span>
             ...

CSS

.element {
  background-color: white;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

.object {
  background-color: white;
  display: block;
  border: 1px solid black;
  border-right: 0px;
}

.kv {
  background-color: white;
  display: block;
  border: 0px dashed gray;
  border-right: 0px;
  border-left: 0px;
  padding: 0.5em;
  padding-right: 0px;
}

.type {
  background-color: #eee;
}

.key {
  font-size: 80%;
  font-weight: bold;
  display: block;
}

.value {
  display: block;
}

.reference {
  color: blue;
  display: block;
}

.string {
  color: black;
  display: block;
}

.list {
  background-color: #ddd;
  display: block;
  border: 1px dashed gray;
  border-right: 0px;
  padding: 0.5em;
  padding-right: 0px;
}