Tailwind CSS Timeline Components

                            <div class="max-w-3xl mx-auto py-8 px-4">
  <h2 class="text-2xl font-bold text-gray-800 mb-6">Project History</h2>
  
  <ul class="relative border-l border-gray-300 ml-3">
    <!-- Timeline item 1 -->
    <li class="mb-6 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 rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <button class="w-full p-4 text-left flex justify-between items-center" onclick="toggleDetails('item1')">
          <div>
            <time class="text-sm font-normal text-gray-500">January 2022</time>
            <h3 class="text-lg font-semibold text-gray-900">Project Inception</h3>
          </div>
          <svg id="item1-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
        <div id="item1-details" class="hidden px-4 pb-4 border-t border-gray-100">
          <p class="mt-3 text-base text-gray-600">Project inception phase involved identifying key stakeholders, defining project scope, and creating initial requirements documentation. The team conducted market research and competitive analysis to position the product effectively.</p>
          <div class="mt-4 flex space-x-3">
            <a href="#" class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-500">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              View Document
            </a>
          </div>
        </div>
      </div>
    </li>
    
    <!-- Timeline item 2 -->
    <li class="mb-6 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 rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <button class="w-full p-4 text-left flex justify-between items-center" onclick="toggleDetails('item2')">
          <div>
            <time class="text-sm font-normal text-gray-500">March 2022</time>
            <h3 class="text-lg font-semibold text-gray-900">Design Phase</h3>
          </div>
          <svg id="item2-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
        <div id="item2-details" class="hidden px-4 pb-4 border-t border-gray-100">
          <p class="mt-3 text-base text-gray-600">The design phase included creating wireframes, user flows, and high-fidelity mockups. Multiple stakeholder reviews and user testing sessions were conducted to refine the designs before development began.</p>
          <div class="mt-4 flex flex-wrap gap-2">
            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">UI Design</span>
            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Wireframing</span>
            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">User Testing</span>
          </div>
        </div>
      </div>
    </li>
    
    <!-- Timeline item 3 -->
    <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 rounded-lg border border-gray-200 shadow-sm overflow-hidden">
        <button class="w-full p-4 text-left flex justify-between items-center" onclick="toggleDetails('item3')">
          <div>
            <time class="text-sm font-normal text-gray-500">May 2022</time>
            <h3 class="text-lg font-semibold text-gray-900">Development Begins</h3>
          </div>
          <svg id="item3-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
        <div id="item3-details" class="hidden px-4 pb-4 border-t border-gray-100">
          <p class="mt-3 text-base text-gray-600">Full development began with a team of front-end and back-end developers. We implemented an agile methodology with two-week sprints and regular demos to stakeholders to ensure alignment with project goals.</p>
          <div class="mt-4 grid grid-cols-2 gap-4">
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
              </div>
              <span class="text-sm text-gray-700">8 Developers</span>
            </div>
            <div class="flex items-center">
              <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <span class="text-sm text-gray-700">12 Sprints</span>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
  
  <script>
    function toggleDetails(id) {
      const details = document.getElementById(`${id}-details`);
      const icon = document.getElementById(`${id}-icon`);
      
      if (details.classList.contains('hidden')) {
        details.classList.remove('hidden');
        icon.classList.add('rotate-180');
      } else {
        details.classList.add('hidden');
        icon.classList.remove('rotate-180');
      }
    }
  </script>
</div> 
                        

                            <div class="max-w-6xl mx-auto py-8 px-4">
  <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Product Development Timeline</h2>
  
  <div class="relative">
    <!-- Horizontal line -->
    <div class="absolute h-0.5 bg-gray-300 top-[69px] left-4 right-4"></div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 relative">
      <!-- Timeline item 1 -->
      <div class="flex flex-col items-center">
        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-4 z-10 ring-8 ring-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z" />
          </svg>
        </div>
        <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm w-full">
          <time class="block text-sm font-mono text-gray-500 mb-1">Q1 2022</time>
          <h3 class="text-lg font-bold text-gray-900">Research Phase</h3>
          <p class="text-gray-600 mt-2">Market research and initial concept development for the product.</p>
        </div>
      </div>
      
      <!-- Timeline item 2 -->
      <div class="flex flex-col items-center">
        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-4 z-10 ring-8 ring-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" />
          </svg>
        </div>
        <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm w-full">
          <time class="block text-sm font-mono text-gray-500 mb-1">Q2 2022</time>
          <h3 class="text-lg font-bold text-gray-900">Design Phase</h3>
          <p class="text-gray-600 mt-2">UI/UX design and prototype development with user testing.</p>
        </div>
      </div>
      
      <!-- Timeline item 3 -->
      <div class="flex flex-col items-center">
        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-4 z-10 ring-8 ring-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm w-full">
          <time class="block text-sm font-mono text-gray-500 mb-1">Q3 2022</time>
          <h3 class="text-lg font-bold text-gray-900">Development</h3>
          <p class="text-gray-600 mt-2">Full-scale development with regular sprints and feature implementation.</p>
        </div>
      </div>
      
      <!-- Timeline item 4 -->
      <div class="flex flex-col items-center">
        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-4 z-10 ring-8 ring-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm w-full">
          <time class="block text-sm font-mono text-gray-500 mb-1">Q4 2022</time>
          <h3 class="text-lg font-bold text-gray-900">Launch</h3>
          <p class="text-gray-600 mt-2">Product launch with marketing campaign and user onboarding.</p>
        </div>
      </div>
    </div>
  </div>
</div> 
                        

                            <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> 
                        

                            <div class="max-w-4xl mx-auto py-8 px-4">
  <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Technology Evolution</h2>
  
  <ul class="relative">
    <!-- Timeline item 1 -->
    <li class="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr] mb-10">
      <div class="text-right mr-8 hidden md:block">
        <time class="text-sm font-mono italic text-gray-500">1984</time>
        <h3 class="text-lg font-bold text-gray-900 mt-1">First Macintosh</h3>
        <p class="text-gray-600 mt-2">The Macintosh 128K, originally released as the Apple Macintosh, revolutionized personal computing with its graphical user interface.</p>
      </div>
      
      <div class="relative flex justify-center">
        <div class="h-full w-0.5 bg-gray-300 absolute left-1/2 -translate-x-1/2"></div>
        <div class="flex items-center justify-center w-8 h-8 bg-blue-500 rounded-full z-10 ring-4 ring-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
      
      <div class="ml-8 md:hidden">
        <time class="text-sm font-mono italic text-gray-500">1984</time>
        <h3 class="text-lg font-bold text-gray-900 mt-1">First Macintosh</h3>
        <p class="text-gray-600 mt-2">The Macintosh 128K, originally released as the Apple Macintosh, revolutionized personal computing with its graphical user interface.</p>
      </div>
    </li>
    
    <!-- Timeline item 2 -->
    <li class="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr] mb-10">
      <div class="hidden md:block"></div>
      
      <div class="relative flex justify-center">
        <div class="h-full w-0.5 bg-gray-300 absolute left-1/2 -translate-x-1/2"></div>
        <div class="flex items-center justify-center w-8 h-8 bg-blue-500 rounded-full z-10 ring-4 ring-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
      
      <div class="ml-8">
        <time class="text-sm font-mono italic text-gray-500">1998</time>
        <h3 class="text-lg font-bold text-gray-900 mt-1">iMac</h3>
        <p class="text-gray-600 mt-2">iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998.</p>
      </div>
    </li>
    
    <!-- Timeline item 3 -->
    <li class="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr] mb-10">
      <div class="text-right mr-8 hidden md:block">
        <time class="text-sm font-mono italic text-gray-500">2001</time>
        <h3 class="text-lg font-bold text-gray-900 mt-1">iPod</h3>
        <p class="text-gray-600 mt-2">The iPod is a discontinued series of portable media players designed and marketed by Apple Inc. The first version was released on October 23, 2001.</p>
      </div>
      
      <div class="relative flex justify-center">
        <div class="h-full w-0.5 bg-gray-300 absolute left-1/2 -translate-x-1/2"></div>
        <div class="flex items-center justify-center w-8 h-8 bg-blue-500 rounded-full z-10 ring-4 ring-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
      
      <div class="ml-8 md:hidden">
        <time class="text-sm font-mono italic text-gray-500">2001</time>
        <h3 class="text-lg font-bold text-gray-900 mt-1">iPod</h3>
        <p class="text-gray-600 mt-2">The iPod is a discontinued series of portable media players designed and marketed by Apple Inc. The first version was released on October 23, 2001.</p>
      </div>
    </li>
    
    <!-- Timeline item 4 -->
    <li class="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr]">
      <div class="hidden md:block"></div>
      
      <div class="relative flex justify-center">
        <div class="flex items-center justify-center w-8 h-8 bg-blue-500 rounded-full z-10 ring-4 ring-white">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>
      
      <div class="ml-8">
        <time class="text-sm font-mono italic text-gray-500">2007</time>
        <h3 class="text-lg font-bold text-gray-900 mt-1">iPhone</h3>
        <p class="text-gray-600 mt-2">iPhone is a line of smartphones produced by Apple Inc. The first-generation iPhone was announced by Steve Jobs on January 9, 2007.</p>
      </div>
    </li>
  </ul>
</div>