Timeline

<!--
  Day 44: Timeline

  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 -->
<div
  class="relative mx-auto flex w-full max-w-md flex-col overflow-hidden rounded-xl bg-white shadow-lg transition"
>
  <!-- Timeline Header -->
  <div class="border-b border-gray-100 p-6">
    <h3 class="text-lg font-bold">Recent Activity</h3>
  </div>

  <!-- Timeline Content -->
  <div class="relative p-6">
    <!-- Timeline Line -->
    <div
      class="absolute top-6 bottom-6 left-6 flex w-8 items-center justify-center"
    >
      <div
        class="h-full w-0.5 rounded-full border border-dashed border-gray-200"
      ></div>
    </div>
    <!-- END Timeline Line -->

    <!-- Timeline Items -->
    <ul class="flex flex-col gap-6">
      <!-- Item 1 -->
      <li class="relative pl-8">
        <div
          class="absolute top-1 left-2 size-4 rounded-full border-2 border-white bg-emerald-500 shadow-sm"
        ></div>
        <div class="flex flex-col">
          <h4 class="leading-6 font-semibold text-gray-900">
            New client onboarded
          </h4>
          <p class="mt-0.5 text-sm/relaxed text-gray-600">
            Acme Corporation has been successfully added to our client list
          </p>
          <span class="mt-1 text-xs font-medium text-gray-400">2 days ago</span>
        </div>
      </li>
      <!-- END Item 1 -->

      <!-- Item 2 -->
      <li class="relative pl-8">
        <div
          class="absolute top-1 left-2 size-4 rounded-full border-2 border-white bg-sky-500 shadow-sm"
        ></div>
        <div class="flex flex-col">
          <h4 class="leading-6 font-semibold text-gray-900">Deal closed</h4>
          <p class="mt-0.5 text-sm/relaxed text-gray-600">
            $24,000 contract signed with TechSolutions Inc.
          </p>
          <span class="mt-1 text-xs font-medium text-gray-400">5 days ago</span>
        </div>
      </li>
      <!-- END Item 2 -->

      <!-- Item 3 -->
      <li class="relative pl-8">
        <div
          class="absolute top-1 left-2 size-4 rounded-full border-2 border-white bg-amber-500 shadow-sm"
        ></div>
        <div class="flex flex-col">
          <h4 class="leading-6 font-semibold text-gray-900">
            Meeting scheduled
          </h4>
          <p class="mt-0.5 text-sm/relaxed text-gray-600">
            Follow-up with Global Enterprises set for next Tuesday
          </p>
          <span class="mt-1 text-xs font-medium text-gray-400">7 days ago</span>
        </div>
      </li>
      <!-- END Item 3 -->

      <!-- Item 4 -->
      <li class="relative pl-8">
        <div
          class="absolute top-1 left-2 size-4 rounded-full border-2 border-white bg-purple-500 shadow-sm"
        ></div>
        <div class="flex flex-col">
          <h4 class="leading-6 font-semibold text-gray-900">
            Lead qualification
          </h4>
          <p class="mt-0.5 text-sm/relaxed text-gray-600">
            New lead from Stellar Industries marked as high priority
          </p>
          <span class="mt-1 text-xs font-medium text-gray-400"
            >10 days ago</span
          >
        </div>
      </li>
      <!-- END Item 4 -->
    </ul>
  </div>
</div>
<!-- END Timeline -->