Timeline Horizontal

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