Timeline Interactive

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