Composant d’intégration multimédia - Crypto/Blockchain

<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-xl rounded-lg shadow-xl overflow-hidden bg-stone-200 dark:bg-stone-800 transition-colors duration-300 transform">
    <!-- Header -->
    <div class="flex items-center justify-between p-4 sm:p-5 border-b border-stone-300 dark:border-stone-700">
      <div class="flex items-center">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-stone-700 dark:text-stone-300" 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.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
        </svg>
        <h3 class="ml-2 text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">Decentralized Insights</h3>
      </div>
      <button class="p-2 rounded-full hover:bg-stone-300 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-400 dark:focus:ring-offset-stone-800 dark:focus:ring-stone-600 transition-colors duration-200">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-400" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Media Placeholder -->
    <div class="relative w-full overflow-hidden" style="padding-top: 56.25%;">
      <!-- 16:9 Aspect Ratio -->
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <!-- Content -->
    <div class="p-4 sm:p-5">
      <h4 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">Understanding Bitcoin Halving: A Deep Dive</h4>
      <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300 mb-4">
        Explore the mechanisms and historical impact of Bitcoin halving events on its supply, scarcity, and market dynamics.
        Essential knowledge for every crypto enthusiast.
      </p>
      <div class="flex items-center text-sm sm:text-base text-stone-600 dark:text-stone-400">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-stone-400 dark:border-stone-600">
        <div>
          <span class="font-medium text-stone-700 dark:text-stone-300">Crypto Insights Hub</span>
          <span class="block text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Published 2 days ago</span>
        </div>
      </div>
    </div>

    <!-- Footer/Actions -->
    <div class="p-4 sm:p-5 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between">
      <button class="flex items-center text-stone-700 dark:text-stone-300 hover:text-brown-700 dark:hover:text-brown-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-400 dark:focus:ring-offset-stone-800 dark:focus:ring-brown-600 transition-colors duration-200">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
        </svg>
        <span class="text-sm sm:text-base">Like</span>
      </button>
      <button class="px-4 py-2 bg-amber-700 dark:bg-amber-600 text-white rounded-md text-sm sm:text-base font-semibold shadow-md hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-amber-400 transition-colors duration-200">
        Share to DApp
      </button>
    </div>
  </div>
</div>