Playful_Music_Timeline_Component

<div class="font-sans bg-gradient-to-br from-emerald-50 to-teal-100 text-gray-800 py-12 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200">

  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 text-emerald-700 dark:text-emerald-400 drop-shadow-lg">Music Journey</h2>

    <div class="relative flex flex-col items-center">
      <!-- Vertical line -->
      <div class="absolute hidden md:block w-1.5 bg-gradient-to-b from-emerald-500 via-sapphire-500 to-ruby-500 h-full rounded-full dark:from-emerald-700 dark:via-blue-700 dark:to-red-700"></div>

      <!-- Timeline Items -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-y-16 gap-x-12 w-full max-w-5xl">

        <!-- Item 1: Left on Desktop, Full Width on Mobile -->
        <div class="md:col-start-1 md:text-right relative md:pr-16 lg:pr-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-emerald-300 dark:focus-within:ring-emerald-600">
            <div class="mb-4 text-emerald-600 dark:text-emerald-400 font-bold text-lg">2018 - The First Beat</div>
            <div class="text-2xl font-bold mb-3 text-emerald-800 dark:text-emerald-300">"Groove Unleashed" Album Release</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Our debut album, a mix of electronic vibes and soulful melodies, set the stage for our sonic exploration.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=1" alt="Album Cover">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13m-6 0V9m0 6a1 1 0 100 2 1 1 0 000-2zm0 0a1 1 0 100 2 1 1 0 000-2zm-6 6a1 1 0 100 2 1 1 0 000-2z"></path></svg>
                <span>Genre: Electronic Pop</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-emerald-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

        <!-- Item 2: Right on Desktop, Full Width on Mobile -->
        <div class="md:col-start-2 md:text-left relative md:pl-16 lg:pl-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:-rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-600">
            <div class="mb-4 text-sapphire-600 dark:text-sapphire-400 font-bold text-lg">2019 - Live Resonance</div>
            <div class="text-2xl font-bold mb-3 text-sapphire-800 dark:text-sapphire-300">World Tour & Fan Engagement</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Connecting with fans globally through vibrant live performances and interactive sessions.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=2" alt="Concert Stage">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15v-1a4 4 0 00-4-4H3m0 0l1.5-1.5M3 3l-1.5 1.5m10 4a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                <span>Attendees: 50,000+</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 left-0 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-sapphire-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

        <!-- Item 3: Left on Desktop, Full Width on Mobile -->
        <div class="md:col-start-1 md:text-right relative md:pr-16 lg:pr-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-red-300 dark:focus-within:ring-red-600">
            <div class="mb-4 text-ruby-600 dark:text-ruby-400 font-bold text-lg">2020 - Digital Symphony</div>
            <div class="text-2xl font-bold mb-3 text-ruby-800 dark:text-ruby-300">Exclusive Streaming Series Launch</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Launched a highly acclaimed streaming series, bringing intimate performances to homes worldwide.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=3" alt="Streaming Setup">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 11-8 0 4 4 0 018 0zm0 8a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                <span>Viewers: 1 Million+</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 right-0 transform translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-ruby-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

        <!-- Item 4: Right on Desktop, Full Width on Mobile -->
        <div class="md:col-start-2 md:text-left relative md:pl-16 lg:pl-24 group">
          <div class="bg-white dark:bg-gray-800 p-6 rounded-3xl shadow-xl dark:shadow-2xl transform transition-transform duration-300 hover:scale-105 hover:-rotate-1 focus-within:scale-105 focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
            <div class="mb-4 text-purple-600 dark:text-purple-400 font-bold text-lg">2021 - Collaborative Harmonies</div>
            <div class="text-2xl font-bold mb-3 text-purple-800 dark:text-purple-300">Ft. Artist Collaborations & Remixes</div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Exciting collaborations with renowned artists, pushing boundaries and creating fresh sounds.</p>
            <img class="w-full h-48 object-cover rounded-xl mb-4 shadow-md" src="https://picsum.photos/400/250?random=4" alt="Collaboration Session">
            <div class="flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-400">
                <img class="w-6 h-6 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar">
                <img class="w-6 h-6 rounded-full border-2 border-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
                <span>Featured Artists</span>
            </div>
          </div>
          <!-- Dot -->
          <div class="hidden md:block absolute top-1/2 left-0 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-purple-500 border-4 border-white dark:border-gray-800 shadow-md group-hover:scale-125 transition-transform duration-300"></div>
        </div>

      </div>
    </div>

    <div class="text-center mt-16">
        <a href="#" class="inline-flex items-center px-8 py-4 bg-emerald-600 text-white font-semibold rounded-full shadow-lg hover:bg-emerald-700 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:bg-emerald-700 dark:hover:bg-emerald-800 dark:focus:ring-emerald-600 transition duration-300">
            Explore More Sounds
            <svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </a>
    </div>

  </div>
</div>

<style>
  /* Custom colors for Jewel Tones, adjusted for playfulness/brightness */
  .text-emerald-700 { color: #027a48; } .dark\:text-emerald-400 { color: #34d399; }
  .bg-emerald-500 { background-color: #10b981; }
  .bg-sapphire-500 { background-color: #3b82f6; }
  .bg-ruby-500 { background-color: #ef4444; }
  .bg-purple-500 { background-color: #a855f7; }

  .text-emerald-600 { color: #059669; } .dark\:text-emerald-400 { color: #34d399; }
  .text-emerald-800 { color: #065f46; } .dark\:text-emerald-300 { color: #6ee7b7; }

  .text-sapphire-600 { color: #2563eb; } .dark\:text-sapphire-400 { color: #60a5fa; }
  .text-sapphire-800 { color: #1e40af; } .dark\:text-sapphire-300 { color: #93c5fd; }

  .text-ruby-600 { color: #dc2626; } .dark\:text-ruby-400 { color: #f87171; }
  .text-ruby-800 { color: #991b1b; } .dark\:text-ruby-300 { color: #fda4af; }

  .text-purple-600 { color: #9333ea; } .dark\:text-purple-400 { color: #c084fc; }
  .text-purple-800 { color: #6b21a8; } .dark\:text-purple-300 { color: #d8b4fe; }


  /* Focus ring colors */
  .focus-within\:ring-emerald-300 { box-shadow: 0 0 0 4px #a7f3d0; } .dark\:focus-within\:ring-emerald-600 { box-shadow: 0 0 0 4px #047857; }
  .focus-within\:ring-blue-300 { box-shadow: 0 0 0 4px #93c5fd; } .dark\:focus-within\:ring-blue-600 { box-shadow: 0 0 0 4px #2563eb; }
  .focus-within\:ring-red-300 { box-shadow: 0 0 0 4px #fca5a5; } .dark\:focus-within\:ring-red-600 { box-shadow: 0 0 0 4px #dc2626; }
  .focus-within\:ring-purple-300 { box-shadow: 0 0 0 4px #d8b4fe; } .dark\:focus-within\:ring-purple-600 { box-shadow: 0 0 0 4px #a855f7; }

  /* Safari specific flex-basis fix for mobile layout */
  @supports (-webkit-touch-callout: none) {
    .md\:grid-cols-2 > div {
      width: 100%;
    }
  }
</style>