Timeline Component

<section class="relative antialiased bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4 py-8 relative">
    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6">
      <div class="flex flex-col md:flex-row -mx-6">
        <div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
          <div class="relative">
            <img src="https://picsum.photos/400/300?random=1" alt="Timeline Image" class="w-full rounded-lg shadow-md">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
              <h2 class="text-xl font-semibold">Timeline Title</h2>
              <p class="text-sm">A brief description of this timeline event.</p>
            </div>
          </div>
        </div>
        <div class="md:flex-grow w-full md:w-2/3 px-6">
          <h3 class="text-2xl font-bold mb-4">Event Title 1</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-500">
            <div>
              <p class="font-semibold">John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
            </div>
          </div>
          <div class="border-l-4 border-purple-500 pl-4">
            <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
      <div class="flex flex-col md:flex-row -mx-6">
        <div class="md:flex-grow w-full md:w-2/3 px-6 order-2 md:order-1">
          <h3 class="text-2xl font-bold mb-4">Event Title 2</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-green-500">
            <div>
              <p class="font-semibold">Jane Smith</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Posted on February 15, 2023</p>
            </div>
          </div>
          <div class="border-l-4 border-green-500 pl-4">
            <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0 order-1 md:order-2">
          <div class="relative">
            <img src="https://picsum.photos/400/300?random=2" alt="Timeline Image" class="w-full rounded-lg shadow-md">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
              <h2 class="text-xl font-semibold">Another Title</h2>
              <p class="text-sm">Related image description.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 mt-8">
      <div class="flex flex-col md:flex-row -mx-6">
        <div class="md:flex-shrink-0 w-full md:w-1/3 px-6 mb-6 md:mb-0">
          <div class="relative">
            <img src="https://picsum.photos/400/300?random=3" alt="Timeline Image" class="w-full rounded-lg shadow-md">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-75 rounded-lg"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 text-center text-white">
              <h2 class="text-xl font-semibold">Final Event</h2>
              <p class="text-sm">Concluding event details.</p>
            </div>
          </div>
        </div>
        <div class="md:flex-grow w-full md:w-2/3 px-6">
          <h3 class="text-2xl font-bold mb-4">Event Title 3</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-blue-500">
            <div>
              <p class="font-semibold">Peter Jones</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Posted on March 10, 2023</p>
            </div>
          </div>
          <div class="border-l-4 border-blue-500 pl-4">
            <p class="text-gray-700 dark:text-gray-300">Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>