Timeline with Icons Alternate

<!--
  Day 90: Timeline with Icons Alternate

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Timeline with Icons Alternate -->
<div
  class="relative mx-auto w-full max-w-xl rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <!-- Timeline Content -->
  <div class="relative px-6 py-10">
    <!-- Timeline Line -->
    <div
      class="absolute -inset-y-4 left-5 flex w-10 items-center justify-center"
    >
      <div
        class="h-full w-0.5 rounded-full border border-dashed border-zinc-300/50"
      ></div>
    </div>
    <!-- END Timeline Line -->

    <!-- Timeline Items -->
    <ul class="flex flex-col gap-6">
      <!-- Item 1 -->
      <li class="relative flex">
        <div
          class="absolute -left-1.5 flex size-11 items-center justify-center rounded-full bg-zinc-50 text-indigo-600 ring-2 ring-zinc-200/50"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="hi-mini hi-check inline-block size-5"
          >
            <path
              fill-rule="evenodd"
              d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-14">
          <h4 class="text-sm/8 font-bold">Task completed</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            Sarah Chen marked "API documentation review" as complete
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Dec 15, 2025 at 16:32</span>
          </div>
        </div>
      </li>
      <!-- END Item 1 -->

      <!-- Item 2 -->
      <li class="relative flex">
        <div
          class="absolute -left-1.5 flex size-11 items-center justify-center rounded-full bg-zinc-50 text-indigo-600 ring-2 ring-zinc-200/50"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="hi-mini hi-user-plus inline-block size-5"
          >
            <path
              d="M10 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM16.25 5.75a.75.75 0 0 0-1.5 0v2h-2a.75.75 0 0 0 0 1.5h2v2a.75.75 0 0 0 1.5 0v-2h2a.75.75 0 0 0 0-1.5h-2v-2Z"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-14">
          <h4 class="text-sm/8 font-bold">New team member added</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            Alex Rodriguez joined the "Mobile App Redesign" project as UX
            Designer
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Dec 15, 2025 at 15:18</span>
          </div>
        </div>
      </li>
      <!-- END Item 2 -->

      <!-- Item 3 -->
      <li class="relative flex">
        <div
          class="absolute -left-1.5 flex size-11 items-center justify-center rounded-full bg-zinc-50 text-indigo-600 ring-2 ring-zinc-200/50"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="hi-mini hi-clock inline-block size-5"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-14">
          <h4 class="text-sm/8 font-bold">Deadline approaching</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            Sprint milestone "Frontend Components" is due in 2 days
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Dec 15, 2025 at 14:05</span>
          </div>
        </div>
      </li>
      <!-- END Item 3 -->

      <!-- Item 4 -->
      <li class="relative flex">
        <div
          class="absolute -left-1.5 flex size-11 items-center justify-center rounded-full bg-zinc-50 text-indigo-600 ring-2 ring-zinc-200/50"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="hi-mini hi-chat-bubble-bottom-center inline-block size-5"
          >
            <path
              fill-rule="evenodd"
              d="M3.43 2.524A41.29 41.29 0 0 1 10 2c2.236 0 4.43.18 6.57.524 1.437.231 2.43 1.49 2.43 2.902v5.148c0 1.413-.993 2.67-2.43 2.902a41.102 41.102 0 0 1-3.55.414c-.28.02-.521.18-.643.413l-1.712 3.293a.75.75 0 0 1-1.33 0l-1.713-3.293a.783.783 0 0 0-.642-.413 41.108 41.108 0 0 1-3.55-.414C1.993 13.245 1 11.986 1 10.574V5.426c0-1.413.993-2.67 2.43-2.902Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-14">
          <h4 class="text-sm/8 font-bold">Comment added</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            Mike Johnson commented on task "Database optimization" with feedback
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Dec 15, 2025 at 12:41</span>
          </div>
        </div>
      </li>
      <!-- END Item 4 -->

      <!-- Item 5 -->
      <li class="relative flex">
        <div
          class="absolute -left-1.5 flex size-11 items-center justify-center rounded-full bg-zinc-50 text-indigo-600 ring-2 ring-zinc-200/50"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="hi-mini hi-folder-plus inline-block size-5"
          >
            <path
              fill-rule="evenodd"
              d="M3.75 3A1.75 1.75 0 0 0 2 4.75v10.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0 0 18 15.25v-8.5A1.75 1.75 0 0 0 16.25 5h-4.836a.25.25 0 0 1-.177-.073L9.823 3.513A1.75 1.75 0 0 0 8.586 3H3.75ZM10 8a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0v-1.5h-1.5a.75.75 0 0 1 0-1.5h1.5v-1.5A.75.75 0 0 1 10 8Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-14">
          <h4 class="text-sm/8 font-bold">New project created</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            Project "Customer Portal V2" initiated with initial team setup
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Dec 15, 2025 at 11:29</span>
          </div>
        </div>
      </li>
      <!-- END Item 5 -->
    </ul>
  </div>
</div>
<!-- END Timeline with Icons Alternate -->