Composants Chronologie Playful_Music_Timeline_Component

Playful_Music_Timeline_Component

Un composant de chronologie ludique et amusant conçu pour les plateformes musicales et audio, avec des tons de bijoux vifs, des éléments arrondis et une mise en page réactive avec prise en charge du mode sombre. Affiche les événements audio ou les pistes au fil du temps.

Aperçu

HTML Code

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

Composants associés

Brutalist_Sepia_Timeline_Documentation

Un composant de chronologie complexe, de style brutaliste, pour la documentation ou les sites wiki, avec des tons sépia/brun et une réactivité totale avec prise en charge du mode sombre. Conçu avec un contraste élevé et une esthétique brute.

Ouvrir

Cyberpunk_Timeline_Dating_Social_Component

Un composant de chronologie réactive avec une esthétique cyberpunk pour les plateformes de rencontres et les plateformes sociales. Comprend des arrière-plans sombres, des accents néon chauds et une mise en page adaptative pour les ordinateurs de bureau, les tablettes et les mobiles, avec une prise en charge complète du mode sombre.

Ouvrir

Composant de chronologie

Un composant de chronologie rétro/vintage simple conçu pour présenter des travaux ou des produits à l’esthétique nostalgique des années 80/90, en utilisant une palette de couleurs analogue pour la prise en charge du mode sombre.

Ouvrir