Vertical Timeline

A vertical timeline built only with Tailwind CSS utility classes: round icon markers on a gradient line, date and category labels, a title and a short description for each event. On phones the line runs down the left edge; from the md breakpoint the line moves to the center and the cards alternate left and right. Use it for company history, product roadmaps, changelogs, project milestones or a "how we got here" section on an about page.

How it works

The root is .ttv-timeline, a section labelled by its heading. The events live in an ordered list, .ttv-list, because their order carries meaning. The connecting line is not an extra element: it is the list's ::before pseudo-element, created with before:absolute before:w-0.5 before:content-[''] and a before:bg-gradient-to-b teal fade. It sits at before:left-6 on small screens and md:before:left-1/2 on wider ones.

Each li.ttv-item reserves room on the left with pl-16 and contains an absolutely positioned 48px icon circle, centered on the line with -translate-x-1/2 and separated from it by a ring-8 ring-teal-50 halo that matches the page background. From md up the item becomes a two-column grid (md:grid md:grid-cols-2 md:gap-16): odd cards use md:col-start-1 md:text-right and even cards use md:col-start-2, while the icon moves to md:left-1/2, the exact middle of the gap. Dates use a time element with an ISO datetime. The last item is styled as "Upcoming" with a dashed, white marker to show a future event. No JavaScript or custom CSS is needed.

Customization

• md:col-start-1 md:text-right / md:col-start-2 on .ttv-card: set every card to md:col-start-2 for a single-sided timeline on desktop too.
• md:before:left-1/2 on .ttv-list and md:left-1/2 on the icons: remove both to keep the line on the left at all sizes.
• before:from-teal-500 before:via-teal-300 before:to-teal-100: change the line gradient, or use before:bg-slate-200 for a flat line.
• bg-teal-600 on a marker: give individual events their own color, for example bg-rose-600 for incidents or bg-amber-500 for warnings.
• border-2 border-dashed border-teal-500 bg-white on the last marker: reuse it on any planned or not-yet-finished event.
• ring-8 ring-teal-50 on the markers: keep the ring color equal to the bg-teal-50 section background so the line looks interrupted around each icon.
• pb-10 on .ttv-item: raise for more breathing room between events, lower for a dense changelog.

Accessibility

The ordered list gets role="list" so its list semantics survive Tailwind's list-style: none reset in Safari, and screen readers announce the number of events. Each event has an h3 title under the section h2. Icons are decorative and marked aria-hidden, so the date, category label and text carry the meaning on their own. All text meets WCAG AA contrast on white cards, and the only motion, a shadow transition on hover, is turned off with motion-reduce:transition-none.

Usage notes

Add or remove li.ttv-item blocks freely; when you insert an item in the middle, swap the md:col-start-* classes of the following cards to keep the alternation.