Explain the file structure and styling of a directory with nested components and utilities.

by alfredopacino

HTML

<div class="tree">
  <div class="subdir">src</div>
  <div class="subdir">components</div>
  <div class="subdir">Header.tsx</div>
  <div class="subdir">Footer.tsx</div>
  <div class="subdir">utils</div>
  <div class="subdir">helpers.ts</div>
</div>

CSS

.tree {
  font-family: monospace;
  line-height: 1; /* very compact, no extra vertical spacing */
}

.subdir {
  position: relative;
  padding-left: 1em; /* space for the tree icon */
  margin: 0;          /* remove default spacing */
}

/* Subtree icon */
.subdir::before {
  content: "└─";       /* or "|_" or "▸" */
  position: absolute;
  left: 0;
  color: #555;
}