Composant d’intégration multimédia - Sports/Fitness

<div class="p-4 sm:p-6 md:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden
              border-l-8 border-r-8 border-teal-500 dark:border-teal-400
              grid grid-cols-1 md:grid-cols-2 gap-0">

    <!-- Left Section: Video Embed / Image Placeholder -->
    <div class="relative bg-zinc-200 dark:bg-zinc-950 aspect-video md:aspect-auto md:h-full overflow-hidden flex items-center justify-center">
      <!-- Placeholder for Video Embed (e.g., YouTube iframe) -->
      <!-- For demonstration, using an image. In a real app, replace with iframe. -->
      <img src="https://picsum.photos/800/600?random=1" alt="Sports action highlight" class="w-full h-full object-cover opacity-90">
      <div class="absolute inset-0 bg-gradient-to-t from-teal-600/50 to-purple-600/50 flex items-center justify-center">
        <button class="p-4 rounded-full bg-white/20 hover:bg-white/30 text-white transition-all transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-white/40">
          <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Right Section: Details and Call to Action -->
    <div class="p-6 sm:p-8 md:p-10 flex flex-col justify-between">
      <div>
        <h3 class="text-xs font-bold uppercase tracking-widest text-teal-600 dark:text-teal-400 mb-2">
          Match Highlights
        </h3>
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-zinc-900 dark:text-white leading-tight mb-4">
          Unstoppable Victory: <span class="text-purple-600 dark:text-purple-400">Championship Decider!</span>
        </h2>
        <p class="text-zinc-600 dark:text-zinc-300 text-sm sm:text-base leading-relaxed mb-6">
          Relive the most exciting moments from the final match of the season. Featuring incredible plays, game-winning shots, and emotional celebrations. Don't miss a second!
        </p>

        <div class="flex items-center space-x-4 mb-6">
          <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Coach Avatar" class="w-12 h-12 rounded-full ring-2 ring-teal-500 dark:ring-teal-400">
          <div>
            <p class="text-zinc-900 dark:text-white font-semibold text-lg">Coach Marcus "The General" Reed</p>
            <p class="text-zinc-500 dark:text-zinc-400 text-sm">Team Strategist & Analyst</p>
          </div>
        </div>
      </div>

      <div class="mt-8 md:mt-0">
        <p class="text-zinc-500 dark:text-zinc-400 text-xs sm:text-sm font-medium uppercase tracking-wider mb-3">
          Aired: September 28, 2023 | Runtime: 12:35
        </p>
        <a href="#" class="inline-flex items-center justify-center w-full sm:w-auto px-6 py-3 rounded-lg
           bg-gradient-to-r from-teal-500 to-purple-600 text-white text-lg font-bold uppercase tracking-wide
           shadow-lg shadow-purple-500/30 dark:shadow-purple-700/40
           hover:from-teal-600 hover:to-purple-700
           transform hover:-translate-y-1 transition-all duration-300 ease-in-out
           focus:outline-none focus:ring-4 focus:ring-purple-500/50">
          <svg class="w-6 h-6 mr-3 -ml-1" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
          </svg>
          Watch Full Match Replay
        </a>
      </div>
    </div>

  </div>
</div>