Gaming Timeline Component

<div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-gray-900 dark:to-black min-h-screen font-sans">

  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-fuchsia-500 dark:from-red-400 dark:to-fuchsia-400 drop-shadow-lg leading-tight">
    <span class="block">Epic Milestones</span>
    <span class="block text-2xl md:text-3xl lg:text-4xl font-semibold opacity-80 text-white dark:text-gray-200 mt-2">The Journey of Valor</span>
  </h2>

  <div class="max-w-4xl mx-auto relative">

    <!-- Timeline Line -->
    <div class="absolute left-1/2 -translate-x-1/2 w-1 h-full bg-gradient-to-b from-yellow-400 via-pink-500 to-purple-600 dark:from-yellow-300 dark:via-pink-400 dark:to-purple-500 shadow-xl rounded-full z-0"></div>

    <!-- Timeline Items Container -->
    <div class="space-y-16 relative z-10">

      <!-- Timeline Item 1 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 text-right">
          <div class="bg-gradient-to-br from-blue-600 to-indigo-700 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-blue-800 dark:border-blue-900 relative group">
            <span class="absolute -top-3 -right-3 px-4 py-1 bg-gradient-to-br from-pink-500 to-red-600 text-white text-sm font-bold rounded-lg shadow-lg rotate-3">New Chapter!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Dawn of Realms</h3>
            <p class="text-indigo-100 text-lg opacity-90">The ancient prophecy fulfilled, heroes unite to face the encroaching shadows. The first realm is reclaimed.</p>
            <span class="block text-indigo-200 text-sm mt-3 opacity-70">Q1 2024</span>
          </div>
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-yellow-300 dark:to-orange-400 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.24 1.5l1.63 3.32a.5.5 0 00.37.27l3.66.53a.5.5 0 01.28.85l-2.65 2.58a.5.5 0 00-.14.44l.63 3.65a.5.5 0 01-.73.53L10 13.06a.5.5 0 00-.46 0l-3.27 1.72a.5.5 0 01-.73-.53l.63-3.65a.5.5 0 00-.14-.44l-2.65-2.58a.5.5 0 01.28-.85l3.66-.53a.5.5 0 00.37-.27L9.24 1.5z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 mt-4 md:mt-0">
          <!-- Empty for alternating layout -->
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 order-2 md:order-1 text-right">
          <!-- Empty for alternating layout -->
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-red-500 to-fuchsia-600 dark:from-red-400 dark:to-fuchsia-500 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 order-1 md:order-2">
          <div class="bg-gradient-to-br from-green-500 to-teal-600 dark:from-green-600 dark:to-teal-700 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-green-700 dark:border-green-800 relative group">
             <span class="absolute -top-3 -left-3 px-4 py-1 bg-gradient-to-br from-orange-400 to-yellow-500 text-white text-sm font-bold rounded-lg shadow-lg -rotate-3">Expansion!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Emerald Jungle</h3>
            <p class="text-teal-100 text-lg opacity-90">New exotic lands are discovered, bringing unique challenges and powerful artifacts. Guilds establish outposts.</p>
            <span class="block text-teal-200 text-sm mt-3 opacity-70">Q3 2024</span>
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 text-right">
          <div class="bg-gradient-to-br from-purple-600 to-pink-700 dark:from-purple-700 dark:to-pink-800 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-purple-800 dark:border-purple-900 relative group">
             <span class="absolute -top-3 -right-3 px-4 py-1 bg-gradient-to-br from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-lg shadow-lg rotate-3">Major Event!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Shadow Citadel Falls</h3>
            <p class="text-pink-100 text-lg opacity-90">After a grueling siege, the ultimate fortress of evil is vanquished. The world breathes a sigh of temporary peace.</p>
            <span class="block text-pink-200 text-sm mt-3 opacity-70">Q4 2024</span>
          </div>
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 dark:from-cyan-300 dark:to-blue-400 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L11.586 2.586A2 2 0 0010.172 2H6zM6 4h4v3a1 1 0 001 1h3v7a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1zm3 8a1 1 0 00-1 1v1a1 1 0 001 1h2a1 1 0 001-1v-1a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 mt-4 md:mt-0">
          <!-- Empty for alternating layout -->
        </div>
      </div>

    </div>
  </div>

</div>