Timeline with Icons

<!--
  Day 68: Timeline with Icons

  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 -->
<div
  class="relative mx-auto flex w-full max-w-md flex-col overflow-hidden rounded-xl bg-white shadow-lg transition"
>
  <!-- Timeline Content -->
  <div class="relative px-6 py-10">
    <!-- Timeline Line -->
    <div
      class="absolute inset-y-0 left-5 flex w-10 items-center justify-center"
    >
      <div class="h-full w-0.5 rounded-full border border-zinc-100"></div>
    </div>
    <!-- END Timeline Line -->

    <!-- Timeline Items -->
    <ul class="flex flex-col gap-6">
      <!-- Item 1 -->
      <li class="relative flex">
        <div
          class="absolute left-0 flex size-8 items-center justify-center rounded-lg border-1 border-zinc-200/75 bg-white"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-arrow-down-tray inline-block size-4 text-emerald-700"
          >
            <path
              d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
            />
            <path
              d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-12">
          <h4 class="text-sm/8 font-bold">5 new qualified leads</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            Premium leads from finance sector downloaded your whitepaper
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Aug 10, 2025 at 16:32</span>
          </div>
        </div>
      </li>
      <!-- END Item 1 -->

      <!-- Item 2 -->
      <li class="relative flex">
        <div
          class="absolute left-0 flex size-8 items-center justify-center rounded-lg border-1 border-zinc-200/75 bg-white"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-arrow-path-rounded-square inline-block size-4 text-purple-700"
          >
            <path
              fill-rule="evenodd"
              d="M8 3.5c-.771 0-1.537.022-2.297.066a1.124 1.124 0 0 0-1.058 1.028l-.018.214a.75.75 0 1 1-1.495-.12l.018-.221a2.624 2.624 0 0 1 2.467-2.399 41.628 41.628 0 0 1 4.766 0 2.624 2.624 0 0 1 2.467 2.399c.056.662.097 1.329.122 2l.748-.748a.75.75 0 1 1 1.06 1.06l-2 2.001a.75.75 0 0 1-1.061 0l-2-1.999a.75.75 0 0 1 1.061-1.06l.689.688a39.89 39.89 0 0 0-.114-1.815 1.124 1.124 0 0 0-1.058-1.028A40.138 40.138 0 0 0 8 3.5ZM3.22 7.22a.75.75 0 0 1 1.061 0l2 2a.75.75 0 1 1-1.06 1.06l-.69-.69c.025.61.062 1.214.114 1.816.048.56.496.996 1.058 1.028a40.112 40.112 0 0 0 4.594 0 1.124 1.124 0 0 0 1.058-1.028 39.2 39.2 0 0 0 .018-.219.75.75 0 1 1 1.495.12l-.018.226a2.624 2.624 0 0 1-2.467 2.399 41.648 41.648 0 0 1-4.766 0 2.624 2.624 0 0 1-2.467-2.399 41.395 41.395 0 0 1-.122-2l-.748.748A.75.75 0 1 1 1.22 9.22l2-2Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-12">
          <h4 class="text-sm/8 font-bold">Lead scoring updated</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            12 prospects moved to hot leads based on recent engagement activity
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Aug 10, 2025 at 15:18</span>
          </div>
        </div>
      </li>
      <!-- END Item 2 -->

      <!-- Item 3 -->
      <li class="relative flex">
        <div
          class="absolute left-0 flex size-8 items-center justify-center rounded-lg border-1 border-zinc-200/75 bg-white"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-clock inline-block size-4 text-blue-700"
          >
            <path
              fill-rule="evenodd"
              d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm7.75-4.25a.75.75 0 0 0-1.5 0V8c0 .414.336.75.75.75h3.25a.75.75 0 0 0 0-1.5h-2.5v-3.5Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-12">
          <h4 class="text-sm/8 font-bold">Demo scheduled</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            Enterprise client TechStart Inc. booked a product demo for tomorrow
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Aug 10, 2025 at 14:05</span>
          </div>
        </div>
      </li>
      <!-- END Item 3 -->

      <!-- Item 4 -->
      <li class="relative flex">
        <div
          class="absolute left-0 flex size-8 items-center justify-center rounded-lg border-1 border-zinc-200/75 bg-white"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-rocket-launch inline-block size-4 text-sky-700"
          >
            <path
              fill-rule="evenodd"
              d="M6.333 4.478A4 4 0 0 0 1 8.25c0 .414.336.75.75.75h3.322c.572.71 1.219 1.356 1.928 1.928v3.322c0 .414.336.75.75.75a4 4 0 0 0 3.772-5.333A10.721 10.721 0 0 0 15 1.75a.75.75 0 0 0-.75-.75c-3.133 0-5.953 1.34-7.917 3.478ZM12 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"
              clip-rule="evenodd"
            />
            <path
              d="M3.902 10.682a.75.75 0 1 0-1.313-.725 4.764 4.764 0 0 0-.469 3.36.75.75 0 0 0 .564.563 4.76 4.76 0 0 0 3.359-.47.75.75 0 1 0-.725-1.312 3.231 3.231 0 0 1-1.81.393 3.232 3.232 0 0 1 .394-1.81Z"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-12">
          <h4 class="text-sm/8 font-bold">Email campaign launched</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            Nurture sequence "SaaS Best Practices" sent to 847 prospects
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Aug 10, 2025 at 12:41</span>
          </div>
        </div>
      </li>
      <!-- END Item 4 -->

      <!-- Item 5 -->
      <li class="relative flex">
        <div
          class="absolute left-0 flex size-8 items-center justify-center rounded-lg border-1 border-zinc-200/75 bg-white"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-globe-alt inline-block size-4 text-amber-700"
          >
            <path
              fill-rule="evenodd"
              d="M3.757 4.5c.18.217.376.42.586.608.153-.61.354-1.175.596-1.678A5.53 5.53 0 0 0 3.757 4.5ZM8 1a6.994 6.994 0 0 0-7 7 7 7 0 1 0 7-7Zm0 1.5c-.476 0-1.091.386-1.633 1.427-.293.564-.531 1.267-.683 2.063A5.48 5.48 0 0 0 8 6.5a5.48 5.48 0 0 0 2.316-.51c-.152-.796-.39-1.499-.683-2.063C9.09 2.886 8.476 2.5 8 2.5Zm3.657 2.608a8.823 8.823 0 0 0-.596-1.678c.444.298.842.659 1.182 1.07-.18.217-.376.42-.586.608Zm-1.166 2.436A6.983 6.983 0 0 1 8 8a6.983 6.983 0 0 1-2.49-.456 10.703 10.703 0 0 0 .202 2.6c.72.231 1.49.356 2.288.356.798 0 1.568-.125 2.29-.356a10.705 10.705 0 0 0 .2-2.6Zm1.433 1.85a12.652 12.652 0 0 0 .018-2.609c.405-.276.78-.594 1.117-.947a5.48 5.48 0 0 1 .44 2.262 7.536 7.536 0 0 1-1.575 1.293Zm-2.172 2.435a9.046 9.046 0 0 1-3.504 0c.039.084.078.166.12.244C6.907 13.114 7.523 13.5 8 13.5s1.091-.386 1.633-1.427c.04-.078.08-.16.12-.244Zm1.31.74a8.5 8.5 0 0 0 .492-1.298c.457-.197.893-.43 1.307-.696a5.526 5.526 0 0 1-1.8 1.995Zm-6.123 0a8.507 8.507 0 0 1-.493-1.298 8.985 8.985 0 0 1-1.307-.696 5.526 5.526 0 0 0 1.8 1.995ZM2.5 8.1c.463.5.993.935 1.575 1.293a12.652 12.652 0 0 1-.018-2.608 7.037 7.037 0 0 1-1.117-.947 5.48 5.48 0 0 0-.44 2.262Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="flex flex-col pl-12">
          <h4 class="text-sm/8 font-bold">Lead magnet published</h4>
          <p class="mt-0.5 text-sm/relaxed text-zinc-600">
            New ebook "B2B Sales Automation Guide" is now live on landing page
          </p>
          <div class="mt-0.5 text-xs/6">
            <span class="font-medium text-zinc-400">Aug 10, 2025 at 11:29</span>
          </div>
        </div>
      </li>
      <!-- END Item 5 -->
    </ul>
  </div>
</div>
<!-- END Timeline with Icons -->