JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="app">
    <h1>React Codebase</h1>
    <div class="code-tree" id="codeTree"></div>
  </div>

  <script src="script.js"></script>

CSS

body {
  background-color: #1e1e1e;
  color: #ffffff;
  font-family: Arial, sans-serif;
}

.app {
  text-align: center;
  margin-top: 20px;
}

.component {
  margin-top: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: inline-block;
  color: black;
}

.folder {
  background-color: #f0f0f0;
}

.file {
  background-color: #eaf7ff;
}

JavaScript

const data = {
  name: "App",
  children: [
    {
      name: "Header",
      children: [
        { name: "Logo", isFile: true },
        {
          name: "Navigation",
          children: [{ name: "NavItem" }, { name: "NavItem", isFile: true }]
        }
      ]
    },
    {
      name: "Main",
      children: [
        { name: "Article", isFile: true },
        { name: "Sidebar", isFile: true }
      ]
    },
    {
      name: "Footer",
      children: [{ name: "Copyright", isFile: true }]
    }
  ]
};

function createComponent(node, level) {
  const marginLeft = `${level * 20}px`;
  const div = document.createElement("div");
  div.className = `component ${node.isFile ? "file" : "folder"}`;
  div.style.marginLeft = marginLeft;
  div.textContent = node.name;

  if (node.children) {
    const childrenDiv = document.createElement("div");
    childrenDiv.className = "children";
    node.children.forEach((child, index) => {
      childrenDiv.appendChild(createComponent(child, level + 1));
    });
    div.appendChild(childrenDiv);
  }

  return div;
}

// Append the component tree to the document body
document.body.appendChild(createComponent(data, 0));