如何简化个人作品集的Tailwind时间轴代码片段？

我在个人作品集中用以下Tailwind CSS代码实现了时间轴效果，但代码冗余，更新和维护特别麻烦。希望能在保留原有视觉效果的前提下简化这段代码，感谢帮忙。

原代码：

<section class="space-y-5 py-10">
      <h2 class="text-3xl font-bold text-center">时间轴</h2>
      <div>
        <div class="flex space-x-2 sm:space-x-4">
          <div class="flex flex-col items-center justify-center">
            <p>2022</p>
            <div class="border-color h-full w-px border-l border-skin-base">
            </div>
          </div>
          <div class="flex flex-col space-y-5 pb-5">
            <p>
              参与Co.Lab期间开发全栈MERN应用
            </p>
            <p>
              毕业于加州多米尼加大学，获得计算机科学学士学位
            </p>
            <p>
              开始参与CodeNation志愿工作，帮助学生学习Web开发
            </p>
          </div>
        </div>
        <div class="flex space-x-2 sm:space-x-4">
          <div class="flex flex-col items-center justify-center">
            <p>2020</p>
            <div class="border-color h-full w-px border-l border-skin-base">
            </div>
          </div>
          <div class="flex flex-col space-y-5 pb-5">
            <p>毕业于伯克利高中</p>
            <p>
              完成Code Nation Pandora项目
            </p>
            <p>
              参与谷歌计算机科学暑期研习班
            </p>
          </div>
        </div>
        <div class="flex space-x-2 sm:space-x-4">
          <div class="flex flex-col items-center justify-center">
            <p>2019</p>
            <div class="border-color h-full w-px border-l border-skin-base">
            </div>
          </div>
          <div class="flex flex-col space-y-5 pb-5">
            <p>
              加入高中机器人俱乐部Team 5419 Berkelium
            </p>
          </div>
        </div>
        <div class="flex space-x-2 sm:space-x-4">
          <div class="flex flex-col items-center justify-center">
            <p>2018</p>
            <div class="border-color h-full w-px border-l border-skin-base">
            </div>
          </div>
          <div class="flex flex-col">
            <p>写下人生第一行代码</p>
          </div>
        </div>
      </div>
    </section>

原效果：

给你两种简化思路，都能保留原视觉效果：

1. 纯HTML精简版 #

直接去掉冗余类、统一结构，减少重复代码：

<section class="space-y-5 py-10">
  <h2 class="text-3xl font-bold text-center">时间轴</h2>
  <!-- 给所有时间轴条目加统一的间距容器 -->
  <div class="space-y-5">
    <!-- 每个时间轴条目结构统一，去掉无用类 -->
    <div class="flex space-x-2 sm:space-x-4">
      <div class="flex flex-col items-center">
        <p>2022</p>
        <div class="h-full w-px border-l border-skin-base"></div>
      </div>
      <div class="flex flex-col space-y-5 pb-5">
        <p>参与Co.Lab期间开发全栈MERN应用</p>
        <p>毕业于加州多米尼加大学，获得计算机科学学士学位</p>
        <p>开始参与CodeNation志愿工作，帮助学生学习Web开发</p>
      </div>
    </div>

    <div class="flex space-x-2 sm:space-x-4">
      <div class="flex flex-col items-center">
        <p>2020</p>
        <div class="h-full w-px border-l border-skin-base"></div>
      </div>
      <div class="flex flex-col space-y-5 pb-5">
        <p>毕业于伯克利高中</p>
        <p>完成Code Nation Pandora项目</p>
        <p>参与谷歌计算机科学暑期研习班</p>
      </div>
    </div>

    <div class="flex space-x-2 sm:space-x-4">
      <div class="flex flex-col items-center">
        <p>2019</p>
        <div class="h-full w-px border-l border-skin-base"></div>
      </div>
      <div class="flex flex-col space-y-5 pb-5">
        <p>加入高中机器人俱乐部Team 5419 Berkelium</p>
      </div>
    </div>

    <div class="flex space-x-2 sm:space-x-4">
      <div class="flex flex-col items-center">
        <p>2018</p>
        <div class="h-full w-px border-l border-skin-base"></div>
      </div>
      <div class="flex flex-col">
        <p>写下人生第一行代码</p>
      </div>
    </div>
  </div>
</section>

精简点：

• 给所有时间轴条目外层加space-y-5容器，替代原来的无类容器，统一控制间距
• 移除左侧容器里没用的justify-center类和空的border-color类
• 保持原有的视觉布局不变

2. JS动态渲染版（推荐，更易维护） #

把时间轴数据抽离成数组，通过JS自动渲染，以后新增/修改事件只需要改数组，不用碰HTML结构：

<section class="space-y-5 py-10">
  <h2 class="text-3xl font-bold text-center">时间轴</h2>
  <div id="timeline-container" class="space-y-5"></div>

  <script>
    // 维护时只需要修改这个数组就行
    const timelineData = [
      {
        year: "2022",
        events: [
          "参与Co.Lab期间开发全栈MERN应用",
          "毕业于加州多米尼加大学，获得计算机科学学士学位",
          "开始参与CodeNation志愿工作，帮助学生学习Web开发"
        ]
      },
      {
        year: "2020",
        events: [
          "毕业于伯克利高中",
          "完成Code Nation Pandora项目",
          "参与谷歌计算机科学暑期研习班"
        ]
      },
      {
        year: "2019",
        events: ["加入高中机器人俱乐部Team 5419 Berkelium"]
      },
      {
        year: "2018",
        events: ["写下人生第一行代码"]
      }
    ];

    // 自动渲染时间轴
    const container = document.getElementById('timeline-container');
    timelineData.forEach((item, index) => {
      // 最后一个条目不需要底部内边距
      const eventBoxClass = index === timelineData.length - 1 ? 'flex flex-col' : 'flex flex-col space-y-5 pb-5';
      const timelineItem = document.createElement('div');
      timelineItem.className = 'flex space-x-2 sm:space-x-4';
      
      timelineItem.innerHTML = `
        <div class="flex flex-col items-center">
          <p>${item.year}</p>
          <div class="h-full w-px border-l border-skin-base"></div>
        </div>
        <div class="${eventBoxClass}">
          ${item.events.map(event => `<p>${event}</p>`).join('')}
        </div>
      `;
      
      container.appendChild(timelineItem);
    });
  </script>
</section>

优势：

• 数据和结构分离，维护成本大幅降低
• 自动处理最后一个条目不需要pb-5的逻辑，避免手动遗漏
• 新增时间点只需要在数组里加对象，不用复制粘贴HTML结构

内容的提问来源于stack exchange，提问作者xilaluna