Blog Timeline Base

<section class="ws-blog-timeline mx-auto max-w-3xl px-6 py-16">
  <h2 class="mb-12 text-3xl font-bold text-slate-900">
    Archive
  </h2>

  <div class="relative">
    <!-- Vertical connector -->
    <div
      class="absolute left-[3.25rem] top-0 h-full w-px bg-slate-200 sm:left-[4rem]"
    ></div>

    <!-- Entry with sticky date -->
    <article class="relative mb-10 flex gap-6">
      <div
        class="sticky top-20 z-10 flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-xl bg-[var(--ws-color-surface)] text-center shadow-sm ring-1 ring-slate-200 sm:h-16 sm:w-16"
      >
        <span
          class="text-lg font-bold leading-none text-slate-900"
          >22</span
        >
        <span
          class="text-[10px] font-medium uppercase tracking-wider text-slate-400"
          >Mar</span
        >
      </div>
      <div
        class="flex-1 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 shadow-sm"
      >
        <div class="flex flex-wrap items-center gap-2 text-xs text-slate-400">
          <span
            class="rounded-full bg-blue-100 px-2 py-0.5 font-medium text-blue-700"
            >Design</span
          >
          <span>·</span>
          <span>5 min read</span>
        </div>
        <h3 class="mt-2 text-lg font-semibold text-slate-900">
          <a
            href="#"
            class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >Building a Tailwind Pattern Registry</a
          >
        </h3>
        <p class="mt-2 text-sm text-slate-600">
          How we structured a growing pattern library into a searchable,
          copy-paste-ready registry with family-based governance.
        </p>
        <div class="mt-3 flex items-center gap-2">
          <div class="h-6 w-6 rounded-full bg-slate-300"></div>
          <span class="text-xs font-medium text-slate-700"
            >Sarah Chen</span
          >
        </div>
      </div>
    </article>

    <!-- Entry -->
    <article class="relative mb-10 flex gap-6">
      <div
        class="sticky top-20 z-10 flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-xl bg-[var(--ws-color-surface)] text-center shadow-sm ring-1 ring-slate-200 sm:h-16 sm:w-16"
      >
        <span
          class="text-lg font-bold leading-none text-slate-900"
          >18</span
        >
        <span
          class="text-[10px] font-medium uppercase tracking-wider text-slate-400"
          >Mar</span
        >
      </div>
      <div
        class="flex-1 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 shadow-sm"
      >
        <div class="flex flex-wrap items-center gap-2 text-xs text-slate-400">
          <span
            class="rounded-full bg-emerald-100 px-2 py-0.5 font-medium text-emerald-700"
            >Engineering</span
          >
          <span>·</span>
          <span>8 min read</span>
        </div>
        <h3 class="mt-2 text-lg font-semibold text-slate-900">
          <a
            href="#"
            class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >CSS-Only Effects Tailwind Can't Do</a
          >
        </h3>
        <p class="mt-2 text-sm text-slate-600">
          A deep dive into aurora gradients, glass effects, and scroll-linked
          animations that require custom CSS.
        </p>
        <div
          class="mt-3 h-40 rounded-lg bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-600"
        ></div>
        <div class="mt-3 flex items-center gap-2">
          <div class="h-6 w-6 rounded-full bg-slate-400"></div>
          <span class="text-xs font-medium text-slate-700"
            >Alex Rivera</span
          >
        </div>
      </div>
    </article>

    <!-- Entry -->
    <article class="relative mb-10 flex gap-6">
      <div
        class="sticky top-20 z-10 flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-xl bg-[var(--ws-color-surface)] text-center shadow-sm ring-1 ring-slate-200 sm:h-16 sm:w-16"
      >
        <span
          class="text-lg font-bold leading-none text-slate-900"
          >12</span
        >
        <span
          class="text-[10px] font-medium uppercase tracking-wider text-slate-400"
          >Mar</span
        >
      </div>
      <div
        class="flex-1 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 shadow-sm"
      >
        <div class="flex flex-wrap items-center gap-2 text-xs text-slate-400">
          <span
            class="rounded-full bg-amber-100 px-2 py-0.5 font-medium text-amber-700"
            >Tutorial</span
          >
          <span>·</span>
          <span>3 min read</span>
        </div>
        <h3 class="mt-2 text-lg font-semibold text-slate-900">
          <a
            href="#"
            class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >Getting Started with Webspire CLI</a
          >
        </h3>
        <p class="mt-2 text-sm text-slate-600">
          Install, browse, and add patterns to your project in under two
          minutes.
        </p>
      </div>
    </article>
  </div>
</section>