Timeline Alternate

<!--
  Day 56: Timeline 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 Alternate -->
<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-8 items-center justify-center sm:left-20"
    >
      <div class="h-full w-0.5 rounded-full border border-indigo-100"></div>
    </div>
    <!-- END Timeline Line -->

    <!-- Timeline Items -->
    <ul class="flex flex-col gap-6">
      <!-- Item 1 -->
      <li class="relative flex">
        <div
          class="absolute top-6 left-0 flex size-6 items-center justify-center rounded-full border-2 border-indigo-100 bg-white sm:top-0 sm:left-15"
        >
          <span class="block size-3 rounded-full bg-indigo-600"></span>
        </div>
        <div class="flex flex-col pl-10 sm:pl-24">
          <div class="text-xs/6 sm:absolute sm:left-0 sm:w-12 sm:text-right">
            <span class="font-medium text-gray-400">14:45</span>
          </div>
          <h4 class="text-sm/6 font-bold">Traffic spike detected</h4>
          <p class="mt-0.5 text-sm/relaxed text-gray-600">
            Your homepage received 250% more visitors than usual in the last
            hour
          </p>
        </div>
      </li>
      <!-- END Item 1 -->

      <!-- Item 2 -->
      <li class="relative flex">
        <div
          class="absolute top-6 left-0 flex size-6 items-center justify-center rounded-full border-2 border-indigo-100 bg-white sm:top-0 sm:left-15"
        >
          <span class="block size-3 rounded-full bg-indigo-600"></span>
        </div>
        <div class="flex flex-col pl-10 sm:pl-24">
          <div class="text-xs/6 sm:absolute sm:left-0 sm:w-12 sm:text-right">
            <span class="font-medium text-gray-400">13:22</span>
          </div>
          <h4 class="text-sm/6 font-bold">Conversion goal reached</h4>
          <p class="mt-0.5 text-sm/relaxed text-gray-600">
            Monthly signup target of 500 new users has been achieved
          </p>
        </div>
      </li>
      <!-- END Item 2 -->

      <!-- Item 3 -->
      <li class="relative flex">
        <div
          class="absolute top-6 left-0 flex size-6 items-center justify-center rounded-full border-2 border-indigo-100 bg-white sm:top-0 sm:left-15"
        >
          <span class="block size-3 rounded-full bg-indigo-600"></span>
        </div>
        <div class="flex flex-col pl-10 sm:pl-24">
          <div class="text-xs/6 sm:absolute sm:left-0 sm:w-12 sm:text-right">
            <span class="font-medium text-gray-400">11:05</span>
          </div>
          <h4 class="text-sm/6 font-bold">Campaign launched</h4>
          <p class="mt-0.5 text-sm/relaxed text-gray-600">
            New email marketing campaign "Summer Promo" is now live
          </p>
        </div>
      </li>
      <!-- END Item 3 -->

      <!-- Item 4 -->
      <li class="relative flex">
        <div
          class="absolute top-6 left-0 flex size-6 items-center justify-center rounded-full border-2 border-indigo-100 bg-white sm:top-0 sm:left-15"
        >
          <span class="block size-3 rounded-full bg-indigo-600"></span>
        </div>
        <div class="flex flex-col pl-10 sm:pl-24">
          <div class="text-xs/6 sm:absolute sm:left-0 sm:w-12 sm:text-right">
            <span class="font-medium text-gray-400">09:30</span>
          </div>
          <h4 class="text-sm/6 font-bold">Bounce rate improved</h4>
          <p class="mt-0.5 text-sm/relaxed text-gray-600">
            Site-wide bounce rate decreased by 12% following navigation updates
          </p>
        </div>
      </li>
      <!-- END Item 4 -->

      <!-- Item 5 -->
      <li class="relative flex">
        <div
          class="absolute top-6 left-0 flex size-6 items-center justify-center rounded-full border-2 border-indigo-100 bg-white sm:top-0 sm:left-15"
        >
          <span class="block size-3 rounded-full bg-indigo-600"></span>
        </div>
        <div class="flex flex-col pl-10 sm:pl-24">
          <div class="text-xs/6 sm:absolute sm:left-0 sm:w-12 sm:text-right">
            <span class="font-medium text-gray-400">08:15</span>
          </div>
          <h4 class="text-sm/6 font-bold">New feature deployed</h4>
          <p class="mt-0.5 text-sm/relaxed text-gray-600">
            User profile customization options have been added to the dashboard
          </p>
        </div>
      </li>
      <!-- END Item 5 -->
    </ul>
  </div>
</div>
<!-- END Timeline Alternate -->