.space-y-5 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.font-bold {
  font-weight: 700;
}
.text-center {
  text-align: center;
}
.flex {
  display: flex;
}
.space-x-2 > *:not(:last-child) {
  margin-right: 0.5rem;
}
.space-x-4 > *:not(:last-child) {
  margin-right: 1rem;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.border-color {
  border-color: #e5e7eb;
}
.h-full {
  height: 100%;
}
.border-l {
  border-left-width: 1px;
  border-left-style: solid;
}
.border-skin-base {
  border-color: #e5e7eb;
}
.text-skin-accent {
  color: #7c3aed;
}

<section class="space-y-5 py-10">
  <h2 class="text-3xl font-bold text-center">Timeline</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  border-l border-skin-base">
        </div>
      </div>
      <div class="flex flex-col space-y-5 pb-5">
        <p>
          Developed full-stack MERN application while a part of{" "}
          <a
            href="https://www.joincolab.io/"
            class="text-skin-accent"
          >
            Co.Lab</a
          >
        </p>
        <p>
          Graduated from{" "}
          <a
            class="text-skin-accent"
            href="https://www.dominican.edu/"
          >
            Dominican University of California
          </a>{" "}
          with a bachelor&apos;s degree in computer science
        </p>
        <p>
          Started Volunteering with CodeNation to help students learn web
          development
        </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  border-l border-skin-base">
        </div>
      </div>
      <div class="flex flex-col space-y-5 pb-5">
        <p>Graduated from Berkeley High School</p>
        <p>
          Completed{" "}
          <a
            class="text-skin-accent"
            href="https://codenation.org/"
          >
            Code Nation
          </a>{" "}
          Pandora program
        </p>
        <p>
          Participant of{" "}
          <a
            class="text-skin-accent"
            href="https://buildyourfuture.withgoogle.com/programs/computer-science-summer-institute"
          >
            Google&apos;s Computer Science Summer Institute
          </a>
        </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  border-l border-skin-base">
        </div>
      </div>
      <div class="flex flex-col space-y-5 pb-5">
        <p>
          Joined my High School&apos;s Robotics Club{" "}
          <a
            class="text-skin-accent"
            href="https://team5419.org/"
          >
            Team 5419 Berkelium
          </a>
        </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  border-l border-skin-base">
        </div>
      </div>
      <div class="flex flex-col">
        <p>Wrote my first line of code</p>
      </div>
    </div>
  </div>
</section>

下面是使用普通CSS的相同代码。试试这个代码...

这里是一个代码片段，以及一个顺风发挥我将如何结构它。一些样式可能不一样，但如果你最终使用这个结构，我有信心，你能够添加任何风格，你需要的。
https://play.tailwindcss.com/s1S4P9JxHB

<!-- timeline -->
<section>
  <!-- container -->
  <div>
    <!-- title -->
    <div>
      <h1>Timeline Bruh</h1>
    </div>
    <!-- 2018 -->
    <div class="flex gap-8">
      <div>
        <h1>2018</h1>
        <div class="bg-gray-200 h-20 w-1 rounded-sm mx-auto"></div>
      </div>
      <div>
        <p>Worked on cool stuff with friends</p>
        <p>Learned how to do cool stuff</p>
        <p>Drove a car to hawaii</p>
      </div>
    </div>
    <!-- 2019 -->
    <div class="flex gap-8">
      <div>
        <h1>2019</h1>
        <div class="bg-gray-200 h-20 w-1 rounded-sm mx-auto"></div>
      </div>
      <div>
        <p>Went to hospital for rabbies</p>
        <p>Joined the Army</p>
        <p>Learned piano</p>
      </div>
    </div>
    <!-- 2020 -->
    <div class="flex gap-8">
      <div>
        <h1>2020</h1>
      </div>
      <div>
        <p>Watched Batman the movie</p>
        <p>Ate greek food for the first time</p>
        <p>Learned guitar</p>
      </div>
    </div>
  </div>
</section>