Timeline Basic

                    <div class="max-w-3xl mx-auto py-8 px-4">
  <h2 class="text-2xl font-bold text-gray-800 mb-6">Company History</h2>
  
  <ul class="relative border-l border-gray-300 ml-3">
    <!-- Timeline item 1 -->
    <li class="mb-8 ml-6">
      <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-500 rounded-full -left-3 ring-8 ring-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
      </span>
      <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
        <div class="flex items-center mb-1">
          <time class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">1984</time>
        </div>
        <h3 class="text-lg font-semibold text-gray-900">First Macintosh computer</h3>
        <p class="mt-2 text-base font-normal text-gray-600">Apple introduces the Macintosh with a 9-inch monochrome display.</p>
      </div>
    </li>
    
    <!-- Timeline item 2 -->
    <li class="mb-8 ml-6">
      <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-500 rounded-full -left-3 ring-8 ring-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
      </span>
      <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
        <div class="flex items-center mb-1">
          <time class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">1998</time>
        </div>
        <h3 class="text-lg font-semibold text-gray-900">iMac</h3>
        <p class="mt-2 text-base font-normal text-gray-600">iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc.</p>
      </div>
    </li>
    
    <!-- Timeline item 3 -->
    <li class="mb-8 ml-6">
      <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-500 rounded-full -left-3 ring-8 ring-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
      </span>
      <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
        <div class="flex items-center mb-1">
          <time class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">2001</time>
        </div>
        <h3 class="text-lg font-semibold text-gray-900">iPod</h3>
        <p class="mt-2 text-base font-normal text-gray-600">The iPod is a discontinued series of portable media players designed and marketed by Apple Inc.</p>
      </div>
    </li>
    
    <!-- Timeline item 4 -->
    <li class="ml-6">
      <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-500 rounded-full -left-3 ring-8 ring-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
      </span>
      <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
        <div class="flex items-center mb-1">
          <time class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">2007</time>
        </div>
        <h3 class="text-lg font-semibold text-gray-900">iPhone</h3>
        <p class="mt-2 text-base font-normal text-gray-600">iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system.</p>
      </div>
    </li>
  </ul>
</div>