3个使用Tailwind CSS的精彩垂直时间轴示例
A vertical timeline is an intelligent way to display a flow of information that branches out from top to bottom and involves some form of content connection (e.g., temporal, semantic, etc.).
垂直时间轴是一种智能的展示信息流的方式，从上到下分支出并涉及某种形式的内容连接（例如，时间、语义等）。
From a purely technical standpoint, a vertical timeline doesn’t differ much from the more common horizontal timeline, and the substantial difference lies in how the information is displayed: a horizontal timeline is more suitable for “temporal” content (e.g., a calendar), while a vertical timeline is ideal for related information.
从纯技术角度来看，垂直时间轴与更常见的水平时间轴并没有太大的区别，实质上的区别在于信息的显示方式：水平时间轴更适合“时间”内容（例如，日历），而垂直时间轴则非常适合相关信息。
In this tutorial we will show you how to create three distinct versions of vertical timelines using Tailwind CSS. Specifically:
在本教程中，我们将向您展示如何使用Tailwind CSS创建三个不同版本的垂直时间轴。具体来说：
If you want to take a look at how we previously implemented a vertical timeline in one of our Tailwind CSS templates, we suggest checking out this SaaS website template called Open Pro.
如果您想查看我们之前如何在我们的Tailwind CSS模板中实现垂直时间轴，我们建议查看这个名为Open Pro的SaaS网站模板。
Example #1: The Milestone Timeline
示例＃1：里程碑时间线
In this example, we will create a vertical timeline to display the milestones of a project using Tailwind CSS. A milestone chart is a diagram that shows a series of important events or stages in a project, represented by a vertical line that crosses the chart at the date they occur.
在这个例子中，我们将使用Tailwind CSS创建一个垂直时间轴来显示项目的里程碑。里程碑图是一个图表，显示项目中一系列重要事件或阶段，由一条垂直线在它们发生的日期上穿过图表。
Let’s begin by creating a simple HTML document where we can include the code for our timeline:
让我们从创建一个简单的HTML文档开始，在其中包含我们的时间轴代码：
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>Vertical Timelines</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>...