垂直时间轴区块

垂直时间线部分直观地表示阶段和步骤。

预览

Phase 1: Planning

Define project scope and requirements.

Phase 2: Development

Implementation of core features.

Phase 3: Launch

Final testing and deployment.

实现代码（Implementation）

<div class="max-w-3xl mx-auto py-12 px-4">
<div class="relative border-l-2 border-indigo-200 dark:border-indigo-900 ml-3 md:ml-1/2">
  <div class="mb-10 ml-8 relative">
    <span class="absolute flex items-center justify-center w-6 h-6 bg-indigo-600 rounded-full -left-11 ring-4 ring-white dark:ring-zinc-950"></span>
    <h3 class="font-bold text-lg text-gray-900 dark:text-white">Phase 1: Planning</h3>
    <p class="mt-1 text-sm text-gray-500">Define project scope and requirements.</p>
  </div>
  <div class="mb-10 ml-8 relative">
    <span class="absolute flex items-center justify-center w-6 h-6 bg-indigo-400 rounded-full -left-11 ring-4 ring-white dark:ring-zinc-950"></span>
    <h3 class="font-bold text-lg text-gray-900 dark:text-white">Phase 2: Development</h3>
    <p class="mt-1 text-sm text-gray-500">Implementation of core features.</p>
  </div>
  <div class="ml-8 relative">
    <span class="absolute flex items-center justify-center w-6 h-6 bg-gray-300 rounded-full -left-11 ring-4 ring-white dark:ring-zinc-950"></span>
    <h3 class="font-bold text-lg text-gray-900 dark:text-white">Phase 3: Launch</h3>
    <p class="mt-1 text-sm text-gray-500">Final testing and deployment.</p>
  </div>
</div>
</div>